/*!
 * Bootstrap v2.2.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#map_canvas img,
.google-maps img {
  max-width: none;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #ffffff;
}

a {
  color: #0088cc;
  text-decoration: none;
}

a:hover {
  color: #005580;
  text-decoration: underline;
}

.img-rounded {
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.img-circle {
  -webkit-border-radius: 500px;
     -moz-border-radius: 500px;
          border-radius: 500px;
}

.row {
  margin-left: -20px;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}

.row:after {
  clear: both;
}

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}

.span12 {
  width: 940px;
}

.span11 {
  width: 860px;
}

.span10 {
  width: 780px;
}

.span9 {
  width: 700px;
}

.span8 {
  width: 620px;
}

.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}

.span5 {
  width: 380px;
}

.span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

.span1 {
  width: 60px;
}

.offset12 {
  margin-left: 980px;
}

.offset11 {
  margin-left: 900px;
}

.offset10 {
  margin-left: 820px;
}

.offset9 {
  margin-left: 740px;
}

.offset8 {
  margin-left: 660px;
}

.offset7 {
  margin-left: 580px;
}

.offset6 {
  margin-left: 500px;
}

.offset5 {
  margin-left: 420px;
}

.offset4 {
  margin-left: 340px;
}

.offset3 {
  margin-left: 260px;
}

.offset2 {
  margin-left: 180px;
}

.offset1 {
  margin-left: 100px;
}

.row-fluid {
  width: 100%;
  *zoom: 1;
}

.row-fluid:before,
.row-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .controls-row [class*="span"] + [class*="span"] {
  margin-left: 2.127659574468085%;
}

.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}

.row-fluid .span11 {
  width: 91.48936170212765%;
  *width: 91.43617021276594%;
}

.row-fluid .span10 {
  width: 82.97872340425532%;
  *width: 82.92553191489361%;
}

.row-fluid .span9 {
  width: 74.46808510638297%;
  *width: 74.41489361702126%;
}

.row-fluid .span8 {
  width: 65.95744680851064%;
  *width: 65.90425531914893%;
}

.row-fluid .span7 {
  width: 57.44680851063829%;
  *width: 57.39361702127659%;
}

.row-fluid .span6 {
  width: 48.93617021276595%;
  *width: 48.88297872340425%;
}

.row-fluid .span5 {
  width: 40.42553191489362%;
  *width: 40.37234042553192%;
}

.row-fluid .span4 {
  width: 31.914893617021278%;
  *width: 31.861702127659576%;
}

.row-fluid .span3 {
  width: 23.404255319148934%;
  *width: 23.351063829787233%;
}

.row-fluid .span2 {
  width: 14.893617021276595%;
  *width: 14.840425531914894%;
}

.row-fluid .span1 {
  width: 6.382978723404255%;
  *width: 6.329787234042553%;
}

.row-fluid .offset12 {
  margin-left: 104.25531914893617%;
  *margin-left: 104.14893617021275%;
}

.row-fluid .offset12:first-child {
  margin-left: 102.12765957446808%;
  *margin-left: 102.02127659574467%;
}

.row-fluid .offset11 {
  margin-left: 95.74468085106382%;
  *margin-left: 95.6382978723404%;
}

.row-fluid .offset11:first-child {
  margin-left: 93.61702127659574%;
  *margin-left: 93.51063829787232%;
}

.row-fluid .offset10 {
  margin-left: 87.23404255319149%;
  *margin-left: 87.12765957446807%;
}

.row-fluid .offset10:first-child {
  margin-left: 85.1063829787234%;
  *margin-left: 84.99999999999999%;
}

.row-fluid .offset9 {
  margin-left: 78.72340425531914%;
  *margin-left: 78.61702127659572%;
}

.row-fluid .offset9:first-child {
  margin-left: 76.59574468085106%;
  *margin-left: 76.48936170212764%;
}

.row-fluid .offset8 {
  margin-left: 70.2127659574468%;
  *margin-left: 70.10638297872339%;
}

.row-fluid .offset8:first-child {
  margin-left: 68.08510638297872%;
  *margin-left: 67.9787234042553%;
}

.row-fluid .offset7 {
  margin-left: 61.70212765957446%;
  *margin-left: 61.59574468085106%;
}

.row-fluid .offset7:first-child {
  margin-left: 59.574468085106375%;
  *margin-left: 59.46808510638297%;
}

.row-fluid .offset6 {
  margin-left: 53.191489361702125%;
  *margin-left: 53.085106382978715%;
}

.row-fluid .offset6:first-child {
  margin-left: 51.063829787234035%;
  *margin-left: 50.95744680851063%;
}

.row-fluid .offset5 {
  margin-left: 44.68085106382979%;
  *margin-left: 44.57446808510638%;
}

.row-fluid .offset5:first-child {
  margin-left: 42.5531914893617%;
  *margin-left: 42.4468085106383%;
}

.row-fluid .offset4 {
  margin-left: 36.170212765957444%;
  *margin-left: 36.06382978723405%;
}

.row-fluid .offset4:first-child {
  margin-left: 34.04255319148936%;
  *margin-left: 33.93617021276596%;
}

.row-fluid .offset3 {
  margin-left: 27.659574468085104%;
  *margin-left: 27.5531914893617%;
}

.row-fluid .offset3:first-child {
  margin-left: 25.53191489361702%;
  *margin-left: 25.425531914893618%;
}

.row-fluid .offset2 {
  margin-left: 19.148936170212764%;
  *margin-left: 19.04255319148936%;
}

.row-fluid .offset2:first-child {
  margin-left: 17.02127659574468%;
  *margin-left: 16.914893617021278%;
}

.row-fluid .offset1 {
  margin-left: 10.638297872340425%;
  *margin-left: 10.53191489361702%;
}

.row-fluid .offset1:first-child {
  margin-left: 8.51063829787234%;
  *margin-left: 8.404255319148938%;
}

[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}

.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}

.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}

.container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  *zoom: 1;
}

.container-fluid:before,
.container-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.container-fluid:after {
  clear: both;
}

p {
  margin: 0 0 10px;
}

.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}

small {
  font-size: 85%;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

cite {
  font-style: normal;
}

.muted {
  color: #999999;
}

.text-warning {
  color: #c09853;
}

a.text-warning:hover {
  color: #a47e3c;
}

.text-error {
  color: #b94a48;
}

a.text-error:hover {
  color: #953b39;
}

.text-info {
  color: #3a87ad;
}

a.text-info:hover {
  color: #2d6987;
}

.text-success {
  color: #468847;
}

a.text-success:hover {
  color: #356635;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  font-weight: normal;
  line-height: 1;
  color: #999999;
}

h1,
h2,
h3 {
  line-height: 40px;
}

h1 {
  font-size: 38.5px;
}

h2 {
  font-size: 31.5px;
}

h3 {
  font-size: 24.5px;
}

h4 {
  font-size: 17.5px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 11.9px;
}

h1 small {
  font-size: 24.5px;
}

h2 small {
  font-size: 17.5px;
}

h3 small {
  font-size: 14px;
}

h4 small {
  font-size: 14px;
}

.page-header {
  padding-bottom: 9px;
  margin: 20px 0 30px;
  border-bottom: 1px solid #eeeeee;
}

ul,
ol {
  padding: 0;
  margin: 0 0 10px 25px;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

li {
  line-height: 20px;
}

ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}

dl {
  margin-bottom: 20px;
}

dt,
dd {
  line-height: 20px;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 10px;
}

.dl-horizontal {
  *zoom: 1;
}

.dl-horizontal:before,
.dl-horizontal:after {
  display: table;
  line-height: 0;
  content: "";
}

.dl-horizontal:after {
  clear: both;
}

.dl-horizontal dt {
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-horizontal dd {
  margin-left: 180px;
}

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #ffffff;
}

abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #999999;
}

abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 5px solid #eeeeee;
}

blockquote p {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
}

blockquote small {
  display: block;
  line-height: 20px;
  color: #999999;
}

blockquote small:before {
  content: '\2014 \00A0';
}

blockquote.pull-right {
  float: right;
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
  border-left: 0;
}

blockquote.pull-right p,
blockquote.pull-right small {
  text-align: right;
}

blockquote.pull-right small:before {
  content: '';
}

blockquote.pull-right small:after {
  content: '\00A0 \2014';
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}

address {
  display: block;
  margin-bottom: 20px;
  font-style: normal;
  line-height: 20px;
}

code,
pre {
  padding: 0 3px 2px;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #333333;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

code {
  padding: 2px 4px;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

pre.prettyprint {
  margin-bottom: 20px;
}

pre code {
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: 0;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

form {
  margin: 0 0 20px;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: 40px;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

legend small {
  font-size: 15px;
  color: #999999;
}

label,
input,
button,
select,
textarea {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}

input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

label {
  display: block;
  margin-bottom: 5px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  display: inline-block;
  height: 20px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

input,
textarea,
.uneditable-input {
  width: 206px;
}

textarea {
  height: auto;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  *margin-top: 0;
  line-height: normal;
  cursor: pointer;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto;
}

select,
input[type="file"] {
  height: 30px;
  /* In IE7, the height of the select element cannot be changed by height, only font-size */

  *margin-top: 4px;
  /* For IE7, add top margin to align select with labels */

  line-height: 30px;
}

select {
  width: 220px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}

select[multiple],
select[size] {
  height: auto;
}

select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.uneditable-input,
.uneditable-textarea {
  color: #999999;
  cursor: not-allowed;
  background-color: #fcfcfc;
  border-color: #cccccc;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
}

.uneditable-input {
  overflow: hidden;
  white-space: nowrap;
}

.uneditable-textarea {
  width: auto;
  height: auto;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999999;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
}

.radio,
.checkbox {
  min-height: 20px;
  padding-left: 20px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  float: left;
  margin-left: -20px;
}

.controls > .radio:first-child,
.controls > .checkbox:first-child {
  padding-top: 5px;
}

.radio.inline,
.checkbox.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle;
}

.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px;
}

.input-mini {
  width: 60px;
}

.input-small {
  width: 90px;
}

.input-medium {
  width: 150px;
}

.input-large {
  width: 210px;
}

.input-xlarge {
  width: 270px;
}

.input-xxlarge {
  width: 530px;
}

input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
  float: none;
  margin-left: 0;
}

.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] {
  display: inline-block;
}

input,
textarea,
.uneditable-input {
  margin-left: 0;
}

.controls-row [class*="span"] + [class*="span"] {
  margin-left: 20px;
}

input.span12,
textarea.span12,
.uneditable-input.span12 {
  width: 926px;
}

input.span11,
textarea.span11,
.uneditable-input.span11 {
  width: 846px;
}

input.span10,
textarea.span10,
.uneditable-input.span10 {
  width: 766px;
}

input.span9,
textarea.span9,
.uneditable-input.span9 {
  width: 686px;
}

input.span8,
textarea.span8,
.uneditable-input.span8 {
  width: 606px;
}

input.span7,
textarea.span7,
.uneditable-input.span7 {
  width: 526px;
}

input.span6,
textarea.span6,
.uneditable-input.span6 {
  width: 446px;
}

input.span5,
textarea.span5,
.uneditable-input.span5 {
  width: 366px;
}

input.span4,
textarea.span4,
.uneditable-input.span4 {
  width: 286px;
}

input.span3,
textarea.span3,
.uneditable-input.span3 {
  width: 206px;
}

input.span2,
textarea.span2,
.uneditable-input.span2 {
  width: 126px;
}

input.span1,
textarea.span1,
.uneditable-input.span1 {
  width: 46px;
}

.controls-row {
  *zoom: 1;
}

.controls-row:before,
.controls-row:after {
  display: table;
  line-height: 0;
  content: "";
}

.controls-row:after {
  clear: both;
}

.controls-row [class*="span"],
.row-fluid .controls-row [class*="span"] {
  float: left;
}

.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
  padding-top: 5px;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  cursor: not-allowed;
  background-color: #eeeeee;
}

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
  background-color: transparent;
}

.control-group.warning > label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
  color: #c09853;
}

.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  color: #c09853;
}

.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  border-color: #c09853;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
  border-color: #a47e3c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}

.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #c09853;
}

.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline {
  color: #b94a48;
}

.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
  color: #b94a48;
}

.control-group.error input,
.control-group.error select,
.control-group.error textarea {
  border-color: #b94a48;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
  border-color: #953b39;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}

.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #b94a48;
}

.control-group.success > label,
.control-group.success .help-block,
.control-group.success .help-inline {
  color: #468847;
}

.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  color: #468847;
}

.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  border-color: #468847;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
  border-color: #356635;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}

.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
  color: #468847;
  background-color: #dff0d8;
  border-color: #468847;
}

.control-group.info > label,
.control-group.info .help-block,
.control-group.info .help-inline {
  color: #3a87ad;
}

.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  color: #3a87ad;
}

.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  border-color: #3a87ad;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
  border-color: #2d6987;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
}

.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #3a87ad;
}

input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
     -moz-box-shadow: 0 0 6px #f8b9b7;
          box-shadow: 0 0 6px #f8b9b7;
}

.form-actions {
  padding: 19px 20px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-top: 1px solid #e5e5e5;
  *zoom: 1;
}

.form-actions:before,
.form-actions:after {
  display: table;
  line-height: 0;
  content: "";
}

.form-actions:after {
  clear: both;
}

.help-block,
.help-inline {
  color: #595959;
}

.help-block {
  display: block;
  margin-bottom: 10px;
}

.help-inline {
  display: inline-block;
  *display: inline;
  padding-left: 5px;
  vertical-align: middle;
  *zoom: 1;
}

.input-append,
.input-prepend {
  margin-bottom: 5px;
  font-size: 0;
  white-space: nowrap;
}

.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input,
.input-append .dropdown-menu,
.input-prepend .dropdown-menu {
  font-size: 14px;
}

.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
  position: relative;
  margin-bottom: 0;
  *margin-left: 0;
  vertical-align: top;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.input-append input:focus,
.input-prepend input:focus,
.input-append select:focus,
.input-prepend select:focus,
.input-append .uneditable-input:focus,
.input-prepend .uneditable-input:focus {
  z-index: 2;
}

.input-append .add-on,
.input-prepend .add-on {
  display: inline-block;
  width: auto;
  height: 20px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #ffffff;
  background-color: #eeeeee;
  border: 1px solid #ccc;
}

.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn {
  vertical-align: top;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-append .active,
.input-prepend .active {
  background-color: #a9dba9;
  border-color: #46a546;
}

.input-prepend .add-on,
.input-prepend .btn {
  margin-right: -1px;
}

.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.input-append input,
.input-append select,
.input-append .uneditable-input {
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.input-append input + .btn-group .btn,
.input-append select + .btn-group .btn,
.input-append .uneditable-input + .btn-group .btn {
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.input-append .add-on,
.input-append .btn,
.input-append .btn-group {
  margin-left: -1px;
}

.input-append .add-on:last-child,
.input-append .btn:last-child {
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.input-prepend.input-append input + .btn-group .btn,
.input-prepend.input-append select + .btn-group .btn,
.input-prepend.input-append .uneditable-input + .btn-group .btn {
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.input-prepend.input-append .btn-group:first-child {
  margin-left: 0;
}

input.search-query {
  padding-right: 14px;
  padding-right: 4px \9;
  padding-left: 14px;
  padding-left: 4px \9;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */

  margin-bottom: 0;
  -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
          border-radius: 15px;
}

/* Allow for input prepend/append in search forms */

.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.form-search .input-append .search-query {
  -webkit-border-radius: 14px 0 0 14px;
     -moz-border-radius: 14px 0 0 14px;
          border-radius: 14px 0 0 14px;
}

.form-search .input-append .btn {
  -webkit-border-radius: 0 14px 14px 0;
     -moz-border-radius: 0 14px 14px 0;
          border-radius: 0 14px 14px 0;
}

.form-search .input-prepend .search-query {
  -webkit-border-radius: 0 14px 14px 0;
     -moz-border-radius: 0 14px 14px 0;
          border-radius: 0 14px 14px 0;
}

.form-search .input-prepend .btn {
  -webkit-border-radius: 14px 0 0 14px;
     -moz-border-radius: 14px 0 0 14px;
          border-radius: 14px 0 0 14px;
}

.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  vertical-align: middle;
  *zoom: 1;
}

.form-search .hide,
.form-inline .hide,
.form-horizontal .hide {
  display: none;
}

.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
  display: inline-block;
}

.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
  margin-bottom: 0;
}

.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
  padding-left: 0;
  margin-bottom: 0;
  vertical-align: middle;
}

.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
  float: left;
  margin-right: 3px;
  margin-left: 0;
}

.control-group {
  margin-bottom: 10px;
}

legend + .control-group {
  margin-top: 20px;
  -webkit-margin-top-collapse: separate;
}

.form-horizontal .control-group {
  margin-bottom: 20px;
  *zoom: 1;
}

.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
  display: table;
  line-height: 0;
  content: "";
}

.form-horizontal .control-group:after {
  clear: both;
}

.form-horizontal .control-label {
  float: left;
  width: 160px;
  padding-top: 5px;
  text-align: right;
}

.form-horizontal .controls {
  *display: inline-block;
  *padding-left: 20px;
  margin-left: 180px;
  *margin-left: 0;
}

.form-horizontal .controls:first-child {
  *padding-left: 180px;
}

.form-horizontal .help-block {
  margin-bottom: 0;
}

.form-horizontal input + .help-block,
.form-horizontal select + .help-block,
.form-horizontal textarea + .help-block {
  margin-top: 10px;
}

.form-horizontal .form-actions {
  padding-left: 180px;
}

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

.table {
  width: 100%;
  margin-bottom: 20px;
}

.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

.table th {
  font-weight: bold;
}

.table thead th {
  vertical-align: bottom;
}

.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
  border-top: 0;
}

.table tbody + tbody {
  border-top: 2px solid #dddddd;
}

.table-condensed th,
.table-condensed td {
  padding: 4px 5px;
}

.table-bordered {
  border: 1px solid #dddddd;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.table-bordered th,
.table-bordered td {
  border-left: 1px solid #dddddd;
}

.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}

.table-bordered thead:first-child tr:first-child th:first-child,
.table-bordered tbody:first-child tr:first-child td:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}

.table-bordered thead:first-child tr:first-child th:last-child,
.table-bordered tbody:first-child tr:first-child td:last-child {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
}

.table-bordered thead:last-child tr:last-child th:first-child,
.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tfoot:last-child tr:last-child td:first-child {
  -webkit-border-radius: 0 0 0 4px;
     -moz-border-radius: 0 0 0 4px;
          border-radius: 0 0 0 4px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
}

.table-bordered thead:last-child tr:last-child th:last-child,
.table-bordered tbody:last-child tr:last-child td:last-child,
.table-bordered tfoot:last-child tr:last-child td:last-child {
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
}

.table-bordered caption + thead tr:first-child th:first-child,
.table-bordered caption + tbody tr:first-child td:first-child,
.table-bordered colgroup + thead tr:first-child th:first-child,
.table-bordered colgroup + tbody tr:first-child td:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}

.table-bordered caption + thead tr:first-child th:last-child,
.table-bordered caption + tbody tr:first-child td:last-child,
.table-bordered colgroup + thead tr:first-child th:last-child,
.table-bordered colgroup + tbody tr:first-child td:last-child {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: #f5f5f5;
}

table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
  display: table-cell;
  float: none;
  margin-left: 0;
}

.table td.span1,
.table th.span1 {
  float: none;
  width: 44px;
  margin-left: 0;
}

.table td.span2,
.table th.span2 {
  float: none;
  width: 124px;
  margin-left: 0;
}

.table td.span3,
.table th.span3 {
  float: none;
  width: 204px;
  margin-left: 0;
}

.table td.span4,
.table th.span4 {
  float: none;
  width: 284px;
  margin-left: 0;
}

.table td.span5,
.table th.span5 {
  float: none;
  width: 364px;
  margin-left: 0;
}

.table td.span6,
.table th.span6 {
  float: none;
  width: 444px;
  margin-left: 0;
}

.table td.span7,
.table th.span7 {
  float: none;
  width: 524px;
  margin-left: 0;
}

.table td.span8,
.table th.span8 {
  float: none;
  width: 604px;
  margin-left: 0;
}

.table td.span9,
.table th.span9 {
  float: none;
  width: 684px;
  margin-left: 0;
}

.table td.span10,
.table th.span10 {
  float: none;
  width: 764px;
  margin-left: 0;
}

.table td.span11,
.table th.span11 {
  float: none;
  width: 844px;
  margin-left: 0;
}

.table td.span12,
.table th.span12 {
  float: none;
  width: 924px;
  margin-left: 0;
}

.table tbody tr.success td {
  background-color: #dff0d8;
}

.table tbody tr.error td {
  background-color: #f2dede;
}

.table tbody tr.warning td {
  background-color: #fcf8e3;
}

.table tbody tr.info td {
  background-color: #d9edf7;
}

.table-hover tbody tr.success:hover td {
  background-color: #d0e9c6;
}

.table-hover tbody tr.error:hover td {
  background-color: #ebcccc;
}

.table-hover tbody tr.warning:hover td {
  background-color: #faf2cc;
}

.table-hover tbody tr.info:hover td {
  background-color: #c4e3f3;
}

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("/media/images/bootstrap/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

/* White icons with optional class, or on hover/active states of certain elements */

.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("/media/images/bootstrap/glyphicons-halflings-white.png");
}

.icon-glass {
  background-position: 0      0;
}

.icon-music {
  background-position: -24px 0;
}

.icon-search {
  background-position: -48px 0;
}

.icon-envelope {
  background-position: -72px 0;
}

.icon-heart {
  background-position: -96px 0;
}

.icon-star {
  background-position: -120px 0;
}

.icon-star-empty {
  background-position: -144px 0;
}

.icon-user {
  background-position: -168px 0;
}

.icon-film {
  background-position: -192px 0;
}

.icon-th-large {
  background-position: -216px 0;
}

.icon-th {
  background-position: -240px 0;
}

.icon-th-list {
  background-position: -264px 0;
}

.icon-ok {
  background-position: -288px 0;
}

.icon-remove {
  background-position: -312px 0;
}

.icon-zoom-in {
  background-position: -336px 0;
}

.icon-zoom-out {
  background-position: -360px 0;
}

.icon-off {
  background-position: -384px 0;
}

.icon-signal {
  background-position: -408px 0;
}

.icon-cog {
  background-position: -432px 0;
}

.icon-trash {
  background-position: -456px 0;
}

.icon-home {
  background-position: 0 -24px;
}

.icon-file {
  background-position: -24px -24px;
}

.icon-time {
  background-position: -48px -24px;
}

.icon-road {
  background-position: -72px -24px;
}

.icon-download-alt {
  background-position: -96px -24px;
}

.icon-download {
  background-position: -120px -24px;
}

.icon-upload {
  background-position: -144px -24px;
}

.icon-inbox {
  background-position: -168px -24px;
}

.icon-play-circle {
  background-position: -192px -24px;
}

.icon-repeat {
  background-position: -216px -24px;
}

.icon-refresh {
  background-position: -240px -24px;
}

.icon-list-alt {
  background-position: -264px -24px;
}

.icon-lock {
  background-position: -287px -24px;
}

.icon-flag {
  background-position: -312px -24px;
}

.icon-headphones {
  background-position: -336px -24px;
}

.icon-volume-off {
  background-position: -360px -24px;
}

.icon-volume-down {
  background-position: -384px -24px;
}

.icon-volume-up {
  background-position: -408px -24px;
}

.icon-qrcode {
  background-position: -432px -24px;
}

.icon-barcode {
  background-position: -456px -24px;
}

.icon-tag {
  background-position: 0 -48px;
}

.icon-tags {
  background-position: -25px -48px;
}

.icon-book {
  background-position: -48px -48px;
}

.icon-bookmark {
  background-position: -72px -48px;
}

.icon-print {
  background-position: -96px -48px;
}

.icon-camera {
  background-position: -120px -48px;
}

.icon-font {
  background-position: -144px -48px;
}

.icon-bold {
  background-position: -167px -48px;
}

.icon-italic {
  background-position: -192px -48px;
}

.icon-text-height {
  background-position: -216px -48px;
}

.icon-text-width {
  background-position: -240px -48px;
}

.icon-align-left {
  background-position: -264px -48px;
}

.icon-align-center {
  background-position: -288px -48px;
}

.icon-align-right {
  background-position: -312px -48px;
}

.icon-align-justify {
  background-position: -336px -48px;
}

.icon-list {
  background-position: -360px -48px;
}

.icon-indent-left {
  background-position: -384px -48px;
}

.icon-indent-right {
  background-position: -408px -48px;
}

.icon-facetime-video {
  background-position: -432px -48px;
}

.icon-picture {
  background-position: -456px -48px;
}

.icon-pencil {
  background-position: 0 -72px;
}

.icon-map-marker {
  background-position: -24px -72px;
}

.icon-adjust {
  background-position: -48px -72px;
}

.icon-tint {
  background-position: -72px -72px;
}

.icon-edit {
  background-position: -96px -72px;
}

.icon-share {
  background-position: -120px -72px;
}

.icon-check {
  background-position: -144px -72px;
}

.icon-move {
  background-position: -168px -72px;
}

.icon-step-backward {
  background-position: -192px -72px;
}

.icon-fast-backward {
  background-position: -216px -72px;
}

.icon-backward {
  background-position: -240px -72px;
}

.icon-play {
  background-position: -264px -72px;
}

.icon-pause {
  background-position: -288px -72px;
}

.icon-stop {
  background-position: -312px -72px;
}

.icon-forward {
  background-position: -336px -72px;
}

.icon-fast-forward {
  background-position: -360px -72px;
}

.icon-step-forward {
  background-position: -384px -72px;
}

.icon-eject {
  background-position: -408px -72px;
}

.icon-chevron-left {
  background-position: -432px -72px;
}

.icon-chevron-right {
  background-position: -456px -72px;
}

.icon-plus-sign {
  background-position: 0 -96px;
}

.icon-minus-sign {
  background-position: -24px -96px;
}

.icon-remove-sign {
  background-position: -48px -96px;
}

.icon-ok-sign {
  background-position: -72px -96px;
}

.icon-question-sign {
  background-position: -96px -96px;
}

.icon-info-sign {
  background-position: -120px -96px;
}

.icon-screenshot {
  background-position: -144px -96px;
}

.icon-remove-circle {
  background-position: -168px -96px;
}

.icon-ok-circle {
  background-position: -192px -96px;
}

.icon-ban-circle {
  background-position: -216px -96px;
}

.icon-arrow-left {
  background-position: -240px -96px;
}

.icon-arrow-right {
  background-position: -264px -96px;
}

.icon-arrow-up {
  background-position: -289px -96px;
}

.icon-arrow-down {
  background-position: -312px -96px;
}

.icon-share-alt {
  background-position: -336px -96px;
}

.icon-resize-full {
  background-position: -360px -96px;
}

.icon-resize-small {
  background-position: -384px -96px;
}

.icon-plus {
  background-position: -408px -96px;
}

.icon-minus {
  background-position: -433px -96px;
}

.icon-asterisk {
  background-position: -456px -96px;
}

.icon-exclamation-sign {
  background-position: 0 -120px;
}

.icon-gift {
  background-position: -24px -120px;
}

.icon-leaf {
  background-position: -48px -120px;
}

.icon-fire {
  background-position: -72px -120px;
}

.icon-eye-open {
  background-position: -96px -120px;
}

.icon-eye-close {
  background-position: -120px -120px;
}

.icon-warning-sign {
  background-position: -144px -120px;
}

.icon-plane {
  background-position: -168px -120px;
}

.icon-calendar {
  background-position: -192px -120px;
}

.icon-random {
  width: 16px;
  background-position: -216px -120px;
}

.icon-comment {
  background-position: -240px -120px;
}

.icon-magnet {
  background-position: -264px -120px;
}

.icon-chevron-up {
  background-position: -288px -120px;
}

.icon-chevron-down {
  background-position: -313px -119px;
}

.icon-retweet {
  background-position: -336px -120px;
}

.icon-shopping-cart {
  background-position: -360px -120px;
}

.icon-folder-close {
  background-position: -384px -120px;
}

.icon-folder-open {
  width: 16px;
  background-position: -408px -120px;
}

.icon-resize-vertical {
  background-position: -432px -119px;
}

.icon-resize-horizontal {
  background-position: -456px -118px;
}

.icon-hdd {
  background-position: 0 -144px;
}

.icon-bullhorn {
  background-position: -24px -144px;
}

.icon-bell {
  background-position: -48px -144px;
}

.icon-certificate {
  background-position: -72px -144px;
}

.icon-thumbs-up {
  background-position: -96px -144px;
}

.icon-thumbs-down {
  background-position: -120px -144px;
}

.icon-hand-right {
  background-position: -144px -144px;
}

.icon-hand-left {
  background-position: -168px -144px;
}

.icon-hand-up {
  background-position: -192px -144px;
}

.icon-hand-down {
  background-position: -216px -144px;
}

.icon-circle-arrow-right {
  background-position: -240px -144px;
}

.icon-circle-arrow-left {
  background-position: -264px -144px;
}

.icon-circle-arrow-up {
  background-position: -288px -144px;
}

.icon-circle-arrow-down {
  background-position: -312px -144px;
}

.icon-globe {
  background-position: -336px -144px;
}

.icon-wrench {
  background-position: -360px -144px;
}

.icon-tasks {
  background-position: -384px -144px;
}

.icon-filter {
  background-position: -408px -144px;
}

.icon-briefcase {
  background-position: -432px -144px;
}

.icon-fullscreen {
  background-position: -456px -144px;
}

.dropup,
.dropdown {
  position: relative;
}

.dropdown-toggle {
  *margin-bottom: -3px;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
  outline: 0;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.dropdown .caret {
  margin-top: 8px;
  margin-left: 2px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.dropdown-menu .divider {
  *width: 100%;
  height: 1px;
  margin: 9px 1px;
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-bottom: 1px solid #ffffff;
}

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  white-space: nowrap;
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  color: #ffffff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  color: #333333;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  outline: 0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover {
  color: #999999;
}

.dropdown-menu .disabled > a:hover {
  text-decoration: none;
  cursor: default;
  background-color: transparent;
  background-image: none;
}

.open {
  *z-index: 1000;
}

.open > .dropdown-menu {
  display: block;
}

.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid #000000;
  content: "";
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 0 6px 6px 6px;
          border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: -2px;
  -webkit-border-radius: 5px 5px 5px 0;
     -moz-border-radius: 5px 5px 5px 0;
          border-radius: 5px 5px 5px 0;
}

.dropdown-submenu > a:after {
  display: block;
  float: right;
  width: 0;
  height: 0;
  margin-top: 5px;
  margin-right: -10px;
  border-color: transparent;
  border-left-color: #cccccc;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
     -moz-border-radius: 6px 0 6px 6px;
          border-radius: 6px 0 6px 6px;
}

.dropdown .dropdown-menu .nav-header {
  padding-right: 20px;
  padding-left: 20px;
}

.typeahead {
  margin-top: 2px;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}

.well-large {
  padding: 24px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.well-small {
  padding: 9px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
     -moz-transition: opacity 0.15s linear;
       -o-transition: opacity 0.15s linear;
          transition: opacity 0.15s linear;
}

.fade.in {
  opacity: 1;
}

.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
     -moz-transition: height 0.35s ease;
       -o-transition: height 0.35s ease;
          transition: height 0.35s ease;
}

.collapse.in {
  height: auto;
}

.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.close:hover {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  *line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #bbbbbb;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #a2a2a2;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #333333;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
}

.btn:active,
.btn.active {
  background-color: #cccccc \9;
}

.btn:first-child {
  *margin-left: 0;
}

.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
  /* Buttons in IE7 don't get borders, so darken on hover */

  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.btn.active,
.btn:active {
  background-color: #e6e6e6;
  background-color: #d9d9d9 \9;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.btn-large {
  padding: 11px 19px;
  font-size: 17.5px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
  margin-top: 2px;
}

.btn-small {
  padding: 2px 10px;
  font-size: 11.9px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
  margin-top: 0;
}

.btn-mini {
  padding: 1px 6px;
  font-size: 10.5px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.btn-block {
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
  color: rgba(255, 255, 255, 0.75);
}

.btn {
  border-color: #c5c5c5;
  border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}

.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  *background-color: #0044cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #ffffff;
  background-color: #0044cc;
  *background-color: #003bb3;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #003399 \9;
}

.btn-warning {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #faa732;
  *background-color: #f89406;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  border-color: #f89406 #f89406 #ad6704;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
  color: #ffffff;
  background-color: #f89406;
  *background-color: #df8505;
}

.btn-warning:active,
.btn-warning.active {
  background-color: #c67605 \9;
}

.btn-danger {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #da4f49;
  *background-color: #bd362f;
  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
  color: #ffffff;
  background-color: #bd362f;
  *background-color: #a9302a;
}

.btn-danger:active,
.btn-danger.active {
  background-color: #942a25 \9;
}

.btn-success {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #5bb75b;
  *background-color: #51a351;
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  background-image: -o-linear-gradient(top, #62c462, #51a351);
  background-image: linear-gradient(to bottom, #62c462, #51a351);
  background-repeat: repeat-x;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
  color: #ffffff;
  background-color: #51a351;
  *background-color: #499249;
}

.btn-success:active,
.btn-success.active {
  background-color: #408140 \9;
}

.btn-info {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #49afcd;
  *background-color: #2f96b4;
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
  color: #ffffff;
  background-color: #2f96b4;
  *background-color: #2a85a0;
}

.btn-info:active,
.btn-info.active {
  background-color: #24748c \9;
}

.btn-inverse {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #363636;
  *background-color: #222222;
  background-image: -moz-linear-gradient(top, #444444, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
  background-image: -webkit-linear-gradient(top, #444444, #222222);
  background-image: -o-linear-gradient(top, #444444, #222222);
  background-image: linear-gradient(to bottom, #444444, #222222);
  background-repeat: repeat-x;
  border-color: #222222 #222222 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  color: #ffffff;
  background-color: #222222;
  *background-color: #151515;
}

.btn-inverse:active,
.btn-inverse.active {
  background-color: #080808 \9;
}

button.btn,
input[type="submit"].btn {
  *padding-top: 3px;
  *padding-bottom: 3px;
}

button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button.btn.btn-large,
input[type="submit"].btn.btn-large {
  *padding-top: 7px;
  *padding-bottom: 7px;
}

button.btn.btn-small,
input[type="submit"].btn.btn-small {
  *padding-top: 3px;
  *padding-bottom: 3px;
}

button.btn.btn-mini,
input[type="submit"].btn.btn-mini {
  *padding-top: 1px;
  *padding-bottom: 1px;
}

.btn-link,
.btn-link:active,
.btn-link[disabled] {
  background-color: transparent;
  background-image: none;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.btn-link {
  color: #0088cc;
  cursor: pointer;
  border-color: transparent;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-link:hover {
  color: #005580;
  text-decoration: underline;
  background-color: transparent;
}

.btn-link[disabled]:hover {
  color: #333333;
  text-decoration: none;
}

.btn-group {
  position: relative;
  display: inline-block;
  *display: inline;
  *margin-left: .3em;
  font-size: 0;
  white-space: nowrap;
  vertical-align: middle;
  *zoom: 1;
}

.btn-group:first-child {
  *margin-left: 0;
}

.btn-group + .btn-group {
  margin-left: 5px;
}

.btn-toolbar {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 0;
}

.btn-toolbar .btn + .btn,
.btn-toolbar .btn-group + .btn,
.btn-toolbar .btn + .btn-group {
  margin-left: 5px;
}

.btn-group > .btn {
  position: relative;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-group > .btn + .btn {
  margin-left: -1px;
}

.btn-group > .btn,
.btn-group > .dropdown-menu {
  font-size: 14px;
}

.btn-group > .btn-mini {
  font-size: 11px;
}

.btn-group > .btn-small {
  font-size: 12px;
}

.btn-group > .btn-large {
  font-size: 16px;
}

.btn-group > .btn:first-child {
  margin-left: 0;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
}

.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
}

.btn-group > .btn.large:first-child {
  margin-left: 0;
  -webkit-border-bottom-left-radius: 6px;
          border-bottom-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
          border-top-left-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-topleft: 6px;
}

.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
  -webkit-border-top-right-radius: 6px;
          border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
          border-bottom-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
  z-index: 2;
}

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}

.btn-group > .btn + .dropdown-toggle {
  *padding-top: 5px;
  padding-right: 8px;
  *padding-bottom: 5px;
  padding-left: 8px;
  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-group > .btn-mini + .dropdown-toggle {
  *padding-top: 2px;
  padding-right: 5px;
  *padding-bottom: 2px;
  padding-left: 5px;
}

.btn-group > .btn-small + .dropdown-toggle {
  *padding-top: 5px;
  *padding-bottom: 4px;
}

.btn-group > .btn-large + .dropdown-toggle {
  *padding-top: 7px;
  padding-right: 12px;
  *padding-bottom: 7px;
  padding-left: 12px;
}

.btn-group.open .dropdown-toggle {
  background-image: none;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-group.open .btn.dropdown-toggle {
  background-color: #e6e6e6;
}

.btn-group.open .btn-primary.dropdown-toggle {
  background-color: #0044cc;
}

.btn-group.open .btn-warning.dropdown-toggle {
  background-color: #f89406;
}

.btn-group.open .btn-danger.dropdown-toggle {
  background-color: #bd362f;
}

.btn-group.open .btn-success.dropdown-toggle {
  background-color: #51a351;
}

.btn-group.open .btn-info.dropdown-toggle {
  background-color: #2f96b4;
}

.btn-group.open .btn-inverse.dropdown-toggle {
  background-color: #222222;
}

.btn .caret {
  margin-top: 8px;
  margin-left: 0;
}

.btn-mini .caret,
.btn-small .caret,
.btn-large .caret {
  margin-top: 6px;
}

.btn-large .caret {
  border-top-width: 5px;
  border-right-width: 5px;
  border-left-width: 5px;
}

.dropup .btn-large .caret {
  border-bottom-width: 5px;
}

.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.btn-group-vertical {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
}

.btn-group-vertical .btn {
  display: block;
  float: none;
  width: 100%;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.btn-group-vertical .btn + .btn {
  margin-top: -1px;
  margin-left: 0;
}

.btn-group-vertical .btn:first-child {
  -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
}

.btn-group-vertical .btn:last-child {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.btn-group-vertical .btn-large:first-child {
  -webkit-border-radius: 6px 6px 0 0;
     -moz-border-radius: 6px 6px 0 0;
          border-radius: 6px 6px 0 0;
}

.btn-group-vertical .btn-large:last-child {
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.alert h4 {
  margin: 0;
}

.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
}

.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-danger,
.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}

.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}

.alert-block p + p {
  margin-top: 5px;
}

.nav {
  margin-bottom: 20px;
  margin-left: 0;
  list-style: none;
}

.nav > li > a {
  display: block;
}

.nav > li > a:hover {
  text-decoration: none;
  background-color: #eeeeee;
}

.nav > .pull-right {
  float: right;
}

.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  color: #999999;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.nav li + .nav-header {
  margin-top: 9px;
}

.nav-list {
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 0;
}

.nav-list > li > a,
.nav-list .nav-header {
  margin-right: -15px;
  margin-left: -15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.nav-list > li > a {
  padding: 3px 15px;
}

.nav-list > .active > a,
.nav-list > .active > a:hover {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #0088cc;
}

.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
  margin-right: 2px;
}

.nav-list .divider {
  *width: 100%;
  height: 1px;
  margin: 9px 1px;
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-bottom: 1px solid #ffffff;
}

.nav-tabs,
.nav-pills {
  *zoom: 1;
}

.nav-tabs:before,
.nav-pills:before,
.nav-tabs:after,
.nav-pills:after {
  display: table;
  line-height: 0;
  content: "";
}

.nav-tabs:after,
.nav-pills:after {
  clear: both;
}

.nav-tabs > li,
.nav-pills > li {
  float: left;
}

.nav-tabs > li > a,
.nav-pills > li > a {
  padding-right: 12px;
  padding-left: 12px;
  margin-right: 2px;
  line-height: 14px;
}

.nav-tabs {
  border-bottom: 1px solid #ddd;
}

.nav-tabs > li {
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 20px;
  border: 1px solid transparent;
  -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

.nav-pills > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: 2px;
  margin-bottom: 2px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.nav-pills > .active > a,
.nav-pills > .active > a:hover {
  color: #ffffff;
  background-color: #0088cc;
}

.nav-stacked > li {
  float: none;
}

.nav-stacked > li > a {
  margin-right: 0;
}

.nav-tabs.nav-stacked {
  border-bottom: 0;
}

.nav-tabs.nav-stacked > li > a {
  border: 1px solid #ddd;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.nav-tabs.nav-stacked > li:first-child > a {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-topleft: 4px;
}

.nav-tabs.nav-stacked > li:last-child > a {
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
}

.nav-tabs.nav-stacked > li > a:hover {
  z-index: 2;
  border-color: #ddd;
}

.nav-pills.nav-stacked > li > a {
  margin-bottom: 3px;
}

.nav-pills.nav-stacked > li:last-child > a {
  margin-bottom: 1px;
}

.nav-tabs .dropdown-menu {
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}

.nav-pills .dropdown-menu {
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.nav .dropdown-toggle .caret {
  margin-top: 6px;
  border-top-color: #0088cc;
  border-bottom-color: #0088cc;
}

.nav .dropdown-toggle:hover .caret {
  border-top-color: #005580;
  border-bottom-color: #005580;
}

/* move down carets for tabs */

.nav-tabs .dropdown-toggle .caret {
  margin-top: 8px;
}

.nav .active .dropdown-toggle .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

.nav-tabs .active .dropdown-toggle .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}

.nav > .dropdown.active > a:hover {
  cursor: pointer;
}

.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
  color: #ffffff;
  background-color: #999999;
  border-color: #999999;
}

.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
  opacity: 1;
  filter: alpha(opacity=100);
}

.tabs-stacked .open > a:hover {
  border-color: #999999;
}

.tabbable {
  *zoom: 1;
}

.tabbable:before,
.tabbable:after {
  display: table;
  line-height: 0;
  content: "";
}

.tabbable:after {
  clear: both;
}

.tab-content {
  overflow: auto;
}

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

.nav > .disabled > a {
  color: #999999;
}

.nav > .disabled > a:hover {
  text-decoration: none;
  cursor: default;
  background-color: transparent;
}

.navbar {
  *position: relative;
  *z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  color: #777777;
}

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

.navbar-inner:before,
.navbar-inner:after {
  display: table;
  line-height: 0;
  content: "";
}

.navbar-inner:after {
  clear: both;
}

.navbar .container {
  width: auto;
}

.nav-collapse.collapse {
  height: auto;
  overflow: visible;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: #777777;
  text-shadow: 0 1px 0 #ffffff;
}

.navbar .brand:hover {
  text-decoration: none;
}

.navbar-text {
  margin-bottom: 0;
  line-height: 40px;
}

.navbar-link {
  color: #777777;
}

.navbar-link:hover {
  color: #333333;
}

.navbar .divider-vertical {
  height: 40px;
  margin: 0 9px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #f2f2f2;
}

.navbar .btn,
.navbar .btn-group {
  margin-top: 5px;
}

.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn {
  margin-top: 0;
}

.navbar-form {
  margin-bottom: 0;
  *zoom: 1;
}

.navbar-form:before,
.navbar-form:after {
  display: table;
  line-height: 0;
  content: "";
}

.navbar-form:after {
  clear: both;
}

.navbar-form input,
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
  margin-top: 5px;
}

.navbar-form input,
.navbar-form select,
.navbar-form .btn {
  display: inline-block;
  margin-bottom: 0;
}

.navbar-form input[type="image"],
.navbar-form input[type="checkbox"],
.navbar-form input[type="radio"] {
  margin-top: 3px;
}

.navbar-form .input-append,
.navbar-form .input-prepend {
  margin-top: 6px;
  white-space: nowrap;
}

.navbar-form .input-append input,
.navbar-form .input-prepend input {
  margin-top: 0;
}

.navbar-search {
  position: relative;
  float: left;
  margin-top: 5px;
  margin-bottom: 0;
}

.navbar-search .search-query {
  padding: 4px 14px;
  margin-bottom: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
  -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
          border-radius: 15px;
}

.navbar-static-top {
  position: static;
  margin-bottom: 0;
}

.navbar-static-top .navbar-inner {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  margin-bottom: 0;
}

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
  border-width: 0 0 1px;
}

.navbar-fixed-bottom .navbar-inner {
  border-width: 1px 0 0;
}

.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
  padding-right: 0;
  padding-left: 0;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}

.navbar-fixed-top {
  top: 0;
}

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.navbar-fixed-bottom {
  bottom: 0;
}

.navbar-fixed-bottom .navbar-inner {
  -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
}

.navbar .nav {
  position: relative;
  left: 0;
  display: block;
  float: left;
  margin: 0 10px 0 0;
}

.navbar .nav.pull-right {
  float: right;
  margin-right: 0;
}

.navbar .nav > li {
  float: left;
}

.navbar .nav > li > a {
  float: none;
  padding: 10px 15px 10px;
  color: #777777;
  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;
}

.navbar .nav .dropdown-toggle .caret {
  margin-top: 8px;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: #333333;
  text-decoration: none;
  background-color: transparent;
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #555555;
  text-decoration: none;
  background-color: #e5e5e5;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

.navbar .btn-navbar {
  display: none;
  float: right;
  padding: 7px 10px;
  margin-right: 5px;
  margin-left: 5px;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #ededed;
  *background-color: #e5e5e5;
  background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
  background-repeat: repeat-x;
  border-color: #e5e5e5 #e5e5e5 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
}

.navbar .btn-navbar:hover,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
  color: #ffffff;
  background-color: #e5e5e5;
  *background-color: #d9d9d9;
}

.navbar .btn-navbar:active,
.navbar .btn-navbar.active {
  background-color: #cccccc \9;
}

.navbar .btn-navbar .icon-bar {
  display: block;
  width: 18px;
  height: 2px;
  background-color: #f5f5f5;
  -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
          border-radius: 1px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
     -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.btn-navbar .icon-bar + .icon-bar {
  margin-top: 3px;
}

.navbar .nav > li > .dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.navbar .nav > li > .dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
  top: auto;
  bottom: -7px;
  border-top: 7px solid #ccc;
  border-bottom: 0;
  border-top-color: rgba(0, 0, 0, 0.2);
}

.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
  top: auto;
  bottom: -6px;
  border-top: 6px solid #ffffff;
  border-bottom: 0;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color: #555555;
  background-color: #e5e5e5;
}

.navbar .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #777777;
  border-bottom-color: #777777;
}

.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}

.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.navbar .pull-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.pull-right:before {
  right: 12px;
  left: auto;
}

.navbar .pull-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.pull-right:after {
  right: 13px;
  left: auto;
}

.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
  right: 100%;
  left: auto;
  margin-right: -1px;
  margin-left: 0;
  -webkit-border-radius: 6px 0 6px 6px;
     -moz-border-radius: 6px 0 6px 6px;
          border-radius: 6px 0 6px 6px;
}

.navbar-inverse {
  color: #999999;
}

.navbar-inverse .navbar-inner {
  background-color: #1b1b1b;
  background-image: -moz-linear-gradient(top, #222222, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
  background-image: -webkit-linear-gradient(top, #222222, #111111);
  background-image: -o-linear-gradient(top, #222222, #111111);
  background-image: linear-gradient(to bottom, #222222, #111111);
  background-repeat: repeat-x;
  border-color: #252525;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
  color: #999999;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.navbar-inverse .brand:hover,
.navbar-inverse .nav > li > a:hover {
  color: #ffffff;
}

.navbar-inverse .nav > li > a:focus,
.navbar-inverse .nav > li > a:hover {
  color: #ffffff;
  background-color: transparent;
}

.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus {
  color: #ffffff;
  background-color: #111111;
}

.navbar-inverse .navbar-link {
  color: #999999;
}

.navbar-inverse .navbar-link:hover {
  color: #ffffff;
}

.navbar-inverse .divider-vertical {
  border-right-color: #222222;
  border-left-color: #111111;
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
  color: #ffffff;
  background-color: #111111;
}

.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #999999;
  border-bottom-color: #999999;
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.navbar-inverse .navbar-search .search-query {
  color: #ffffff;
  background-color: #515151;
  border-color: #111111;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
  -webkit-transition: none;
     -moz-transition: none;
       -o-transition: none;
          transition: none;
}

.navbar-inverse .navbar-search .search-query:-moz-placeholder {
  color: #cccccc;
}

.navbar-inverse .navbar-search .search-query:-ms-input-placeholder {
  color: #cccccc;
}

.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder {
  color: #cccccc;
}

.navbar-inverse .navbar-search .search-query:focus,
.navbar-inverse .navbar-search .search-query.focused {
  padding: 5px 15px;
  color: #333333;
  text-shadow: 0 1px 0 #ffffff;
  background-color: #ffffff;
  border: 0;
  outline: 0;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.navbar-inverse .btn-navbar {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #0e0e0e;
  *background-color: #040404;
  background-image: -moz-linear-gradient(top, #151515, #040404);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
  background-image: -webkit-linear-gradient(top, #151515, #040404);
  background-image: -o-linear-gradient(top, #151515, #040404);
  background-image: linear-gradient(to bottom, #151515, #040404);
  background-repeat: repeat-x;
  border-color: #040404 #040404 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.navbar-inverse .btn-navbar:hover,
.navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active,
.navbar-inverse .btn-navbar.disabled,
.navbar-inverse .btn-navbar[disabled] {
  color: #ffffff;
  background-color: #040404;
  *background-color: #000000;
}

.navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active {
  background-color: #000000 \9;
}

.breadcrumb {
  padding: 8px 15px;
  margin: 0 0 20px;
  list-style: none;
  background-color: #f5f5f5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.breadcrumb li {
  display: inline-block;
  *display: inline;
  text-shadow: 0 1px 0 #ffffff;
  *zoom: 1;
}

.breadcrumb .divider {
  padding: 0 5px;
  color: #ccc;
}

.breadcrumb .active {
  color: #999999;
}

.pagination {
  margin: 20px 0;
}

.pagination ul {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  margin-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  *zoom: 1;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination ul > li {
  display: inline;
}

.pagination ul > li > a,
.pagination ul > li > span {
  float: left;
  padding: 4px 12px;
  line-height: 20px;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-left-width: 0;
}

.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span {
  background-color: #f5f5f5;
}

.pagination ul > .active > a,
.pagination ul > .active > span {
  color: #999999;
  cursor: default;
}

.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover {
  color: #999999;
  cursor: default;
  background-color: transparent;
}

.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  border-left-width: 1px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
}

.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
}

.pagination-centered {
  text-align: center;
}

.pagination-right {
  text-align: right;
}

.pagination-large ul > li > a,
.pagination-large ul > li > span {
  padding: 11px 19px;
  font-size: 17.5px;
}

.pagination-large ul > li:first-child > a,
.pagination-large ul > li:first-child > span {
  -webkit-border-bottom-left-radius: 6px;
          border-bottom-left-radius: 6px;
  -webkit-border-top-left-radius: 6px;
          border-top-left-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-topleft: 6px;
}

.pagination-large ul > li:last-child > a,
.pagination-large ul > li:last-child > span {
  -webkit-border-top-right-radius: 6px;
          border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
          border-bottom-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
}

.pagination-mini ul > li:first-child > a,
.pagination-small ul > li:first-child > a,
.pagination-mini ul > li:first-child > span,
.pagination-small ul > li:first-child > span {
  -webkit-border-bottom-left-radius: 3px;
          border-bottom-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
          border-top-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -moz-border-radius-topleft: 3px;
}

.pagination-mini ul > li:last-child > a,
.pagination-small ul > li:last-child > a,
.pagination-mini ul > li:last-child > span,
.pagination-small ul > li:last-child > span {
  -webkit-border-top-right-radius: 3px;
          border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
          border-bottom-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomright: 3px;
}

.pagination-small ul > li > a,
.pagination-small ul > li > span {
  padding: 2px 10px;
  font-size: 11.9px;
}

.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
  padding: 1px 6px;
  font-size: 10.5px;
}

.pager {
  margin: 20px 0;
  text-align: center;
  list-style: none;
  *zoom: 1;
}

.pager:before,
.pager:after {
  display: table;
  line-height: 0;
  content: "";
}

.pager:after {
  clear: both;
}

.pager li {
  display: inline;
}

.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
          border-radius: 15px;
}

.pager li > a:hover {
  text-decoration: none;
  background-color: #f5f5f5;
}

.pager .next > a,
.pager .next > span {
  float: right;
}

.pager .previous > a,
.pager .previous > span {
  float: left;
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > span {
  color: #999999;
  cursor: default;
  background-color: #fff;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop,
.modal-backdrop.fade.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  width: 560px;
  margin: -250px 0 0 -280px;
  background-color: #ffffff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  outline: none;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}

.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 50%;
}

.modal-header {
  padding: 9px 15px;
  border-bottom: 1px solid #eee;
}

.modal-header .close {
  margin-top: 2px;
}

.modal-header h3 {
  margin: 0;
  line-height: 30px;
}

.modal-body {
  max-height: 400px;
  padding: 15px;
  overflow-y: auto;
}

.modal-form {
  margin-bottom: 0;
}

.modal-footer {
  padding: 14px 15px 15px;
  margin-bottom: 0;
  text-align: right;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 #ffffff;
     -moz-box-shadow: inset 0 1px 0 #ffffff;
          box-shadow: inset 0 1px 0 #ffffff;
}

.modal-footer:before,
.modal-footer:after {
  display: table;
  line-height: 0;
  content: "";
}

.modal-footer:after {
  clear: both;
}

.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}

.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

.tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  padding: 5px;
  font-size: 11px;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: visible;
}

.tooltip.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.tooltip.top {
  margin-top: -3px;
}

.tooltip.right {
  margin-left: 3px;
}

.tooltip.bottom {
  margin-top: 3px;
}

.tooltip.left {
  margin-left: -3px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-color: #000000;
  border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-right-color: #000000;
  border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-left-color: #000000;
  border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #000000;
  border-width: 0 5px 5px;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  width: 236px;
  padding: 1px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.popover.top {
  margin-top: -10px;
}

.popover.right {
  margin-left: 10px;
}

.popover.bottom {
  margin-top: 10px;
}

.popover.left {
  margin-left: -10px;
}

.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
}

.popover-content {
  padding: 9px 14px;
}

.popover-content p,
.popover-content ul,
.popover-content ol {
  margin-bottom: 0;
}

.popover .arrow,
.popover .arrow:after {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover .arrow:after {
  z-index: -1;
  content: "";
}

.popover.top .arrow {
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #ffffff;
  border-width: 10px 10px 0;
}

.popover.top .arrow:after {
  bottom: -1px;
  left: -11px;
  border-top-color: rgba(0, 0, 0, 0.25);
  border-width: 11px 11px 0;
}

.popover.right .arrow {
  top: 50%;
  left: -10px;
  margin-top: -10px;
  border-right-color: #ffffff;
  border-width: 10px 10px 10px 0;
}

.popover.right .arrow:after {
  bottom: -11px;
  left: -1px;
  border-right-color: rgba(0, 0, 0, 0.25);
  border-width: 11px 11px 11px 0;
}

.popover.bottom .arrow {
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border-bottom-color: #ffffff;
  border-width: 0 10px 10px;
}

.popover.bottom .arrow:after {
  top: -1px;
  left: -11px;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  border-width: 0 11px 11px;
}

.popover.left .arrow {
  top: 50%;
  right: -10px;
  margin-top: -10px;
  border-left-color: #ffffff;
  border-width: 10px 0 10px 10px;
}

.popover.left .arrow:after {
  right: -1px;
  bottom: -11px;
  border-left-color: rgba(0, 0, 0, 0.25);
  border-width: 11px 0 11px 11px;
}

.thumbnails {
  margin-left: -20px;
  list-style: none;
  *zoom: 1;
}

.thumbnails:before,
.thumbnails:after {
  display: table;
  line-height: 0;
  content: "";
}

.thumbnails:after {
  clear: both;
}

.row-fluid .thumbnails {
  margin-left: 0;
}

.thumbnails > li {
  float: left;
  margin-bottom: 20px;
  margin-left: 20px;
}

.thumbnail {
  display: block;
  padding: 4px;
  line-height: 20px;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

a.thumbnail:hover {
  border-color: #0088cc;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
     -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
          box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}

.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.thumbnail .caption {
  padding: 9px;
  color: #555555;
}

.media,
.media-body {
  overflow: hidden;
  *overflow: visible;
  zoom: 1;
}

.media,
.media .media {
  margin-top: 15px;
}

.media:first-child {
  margin-top: 0;
}

.media-object {
  display: block;
}

.media-heading {
  margin: 0 0 5px;
}

.media .pull-left {
  margin-right: 10px;
}

.media .pull-right {
  margin-left: 10px;
}

.media-list {
  margin-left: 0;
  list-style: none;
}

.label,
.badge {
  display: inline-block;
  padding: 2px 4px;
  font-size: 11.844px;
  font-weight: bold;
  line-height: 14px;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #999999;
}

.label {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.badge {
  padding-right: 9px;
  padding-left: 9px;
  -webkit-border-radius: 9px;
     -moz-border-radius: 9px;
          border-radius: 9px;
}

a.label:hover,
a.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.label-important,
.badge-important {
  background-color: #b94a48;
}

.label-important[href],
.badge-important[href] {
  background-color: #953b39;
}

.label-warning,
.badge-warning {
  background-color: #f89406;
}

.label-warning[href],
.badge-warning[href] {
  background-color: #c67605;
}

.label-success,
.badge-success {
  background-color: #468847;
}

.label-success[href],
.badge-success[href] {
  background-color: #356635;
}

.label-info,
.badge-info {
  background-color: #3a87ad;
}

.label-info[href],
.badge-info[href] {
  background-color: #2d6987;
}

.label-inverse,
.badge-inverse {
  background-color: #333333;
}

.label-inverse[href],
.badge-inverse[href] {
  background-color: #1a1a1a;
}

.btn .label,
.btn .badge {
  position: relative;
  top: -1px;
}

.btn-mini .label,
.btn-mini .badge {
  top: 0;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-ms-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
  background-repeat: repeat-x;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress .bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #0e90d2;
  background-image: -moz-linear-gradient(top, #149bdf, #0480be);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
  background-image: -o-linear-gradient(top, #149bdf, #0480be);
  background-image: linear-gradient(to bottom, #149bdf, #0480be);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
     -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: width 0.6s ease;
     -moz-transition: width 0.6s ease;
       -o-transition: width 0.6s ease;
          transition: width 0.6s ease;
}

.progress .bar + .bar {
  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
     -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
          box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.progress-striped .bar {
  background-color: #149bdf;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  -webkit-background-size: 40px 40px;
     -moz-background-size: 40px 40px;
       -o-background-size: 40px 40px;
          background-size: 40px 40px;
}

.progress.active .bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

.progress-danger .bar,
.progress .bar-danger {
  background-color: #dd514c;
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
}

.progress-danger.progress-striped .bar,
.progress-striped .bar-danger {
  background-color: #ee5f5b;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-success .bar,
.progress .bar-success {
  background-color: #5eb95e;
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(to bottom, #62c462, #57a957);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
}

.progress-success.progress-striped .bar,
.progress-striped .bar-success {
  background-color: #62c462;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-info .bar,
.progress .bar-info {
  background-color: #4bb1cf;
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
}

.progress-info.progress-striped .bar,
.progress-striped .bar-info {
  background-color: #5bc0de;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-warning .bar,
.progress .bar-warning {
  background-color: #faa732;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}

.progress-warning.progress-striped .bar,
.progress-striped .bar-warning {
  background-color: #fbb450;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.accordion {
  margin-bottom: 20px;
}

.accordion-group {
  margin-bottom: 2px;
  border: 1px solid #e5e5e5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.accordion-heading {
  border-bottom: 0;
}

.accordion-heading .accordion-toggle {
  display: block;
  padding: 8px 15px;
}

.accordion-toggle {
  cursor: pointer;
}

.accordion-inner {
  padding: 9px 15px;
  border-top: 1px solid #e5e5e5;
}

.carousel {
  position: relative;
  margin-bottom: 20px;
  line-height: 1;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel .item {
  position: relative;
  display: none;
  -webkit-transition: 0.6s ease-in-out left;
     -moz-transition: 0.6s ease-in-out left;
       -o-transition: 0.6s ease-in-out left;
          transition: 0.6s ease-in-out left;
}

.carousel .item > img {
  display: block;
  line-height: 1;
}

.carousel .active,
.carousel .next,
.carousel .prev {
  display: block;
}

.carousel .active {
  left: 0;
}

.carousel .next,
.carousel .prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel .next {
  left: 100%;
}

.carousel .prev {
  left: -100%;
}

.carousel .next.left,
.carousel .prev.right {
  left: 0;
}

.carousel .active.left {
  left: -100%;
}

.carousel .active.right {
  left: 100%;
}

.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
     -moz-border-radius: 23px;
          border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.carousel-control.right {
  right: 15px;
  left: auto;
}

.carousel-control:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.carousel-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
  background: #333333;
  background: rgba(0, 0, 0, 0.75);
}

.carousel-caption h4,
.carousel-caption p {
  line-height: 20px;
  color: #ffffff;
}

.carousel-caption h4 {
  margin: 0 0 5px;
}

.carousel-caption p {
  margin-bottom: 0;
}

.hero-unit {
  padding: 60px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  color: inherit;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.hero-unit h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
  color: inherit;
}

.hero-unit li {
  line-height: 30px;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.invisible {
  visibility: hidden;
}

.affix {
  position: fixed;
}
/* BIKE AID Design Tokens
   ---------------------------------------------------------------------------------------------------------------------
   Eine Quelle fuer Farben, Typo, Abstaende, Schatten und Ebenen — fuer beide Themes.

   Warum: screen.css (117 KB) und dark.css (27 KB) pflegten dieselben Farben doppelt. #00386a stand 49x im Code,
   #9f2321 38x, #1d5c8e 29x. Jede neue Komponente musste zweimal gebaut werden, und Dark Mode driftete strukturell
   auseinander.

   ZWEI EBENEN, und die Unterscheidung ist wichtig:

     1. PRIMITIVE (--ba-blue-600, --ba-grey-200, --ba-white …)
        Die reine Palette. In beiden Themes derselbe Wert. Ein Austausch von Hex gegen ein Primitive aendert
        garantiert nichts am Rendering — deshalb arbeitet Welle 4.2 ausschliesslich damit.

     2. SEMANTIK (--ba-bg, --ba-text, --ba-surface, --ba-border …)
        Rollen statt Farben. Diese schalten unter [data-theme="dark"] um. Ein Primitive gegen eine Rolle zu
        tauschen ist eine bewusste Entscheidung pro Selektor — das ist Welle 4.3, zusammen mit dem Zusammenfalten
        von dark.css.

   Wer neue Komponenten baut, nimmt die SEMANTIK. Die Primitive sind nur die Vorratskammer.

   Namenskonvention --ba-* wie in docs/html/cockpit.css, damit Cockpit und Frontend dieselbe Sprache sprechen.
   Reihenfolge: MUSS vor bootstrap.min.css und screen.css geladen werden (siehe header.tpl) — beide landen im
   selben kombinierten Bundle, ein var() ohne Fallback ist deshalb sicher.
   --------------------------------------------------------------------------------------------------------------------- */

:root {
    /* ==================================================================================================================
       EBENE 1 — PRIMITIVE. Themeunabhaengig. Werte aus dem Bestand, nichts neu erfunden.
       ================================================================================================================== */

    /* Neutral */
    --ba-white:             #ffffff;
    --ba-black:             #000000;

    /* Blau — die Markenachse */
    --ba-blue-900:          #00386a;   /* Fliesstext, Ueberschriften (49x im Bestand) */
    --ba-blue-700:          #104774;   /* Dunkle sekundaere Aktionen */
    --ba-blue-600:          #1d5c8e;   /* Hauptblau: Buttons, Links (29x) */
    /* Sekundaer, Hervorhebungen (27x). Bis 2026-10-17 #4789be: weisse Schrift
       darauf und das Blau als Text auf Weiss kamen nur auf 3,75:1, axe meldete
       das auf jeder Seite (Login-Knopf, Kalendertage, Badges, Buttons; UX-Review
       U18). #36719f ist derselbe Farbton, nur dunkler: 5,2:1 auf Weiss und mit
       weisser Schrift, auf den hellen Toenungen #f4f7fb/#ecf3f9 noch 4,7:1. */
    --ba-blue-500:          #36719f;
    /* Hover und Text auf dem Footer-Blau. War #76a0c4 (4,28:1 auf #00386a),
       aufgehellt auf 4,8:1. Steht nur auf dunklem Grund. */
    --ba-blue-300:          #82a9ca;

    /* Rot + Gold — Logofarben */
    --ba-red-600:           #9f2321;   /* Destruktiv, Anmelde-CTA, Akzentlinien (38x) */
    --ba-red-300:           #ff8784;   /* Dasselbe Rot fuer dunklen Grund (stand schon in dark.css) */
    --ba-gold-500:          #f5c200;   /* Logostern, Fokusring, Nav-Pills im Dunkeln */

    /* Gruen — Erfolg */
    --ba-green-600:         #0b9a00;
    /* Aufgehelltes Gruen fuer Text auf dunklem Grund: #0b9a00 kommt dort nur
       auf 3.5:1, dieser Wert auf 7.2:1. Stand vorher als Rohwert in dark.css
       an .fee-youth. */
    --ba-green-300:         #4ec94a;

    /* Grau */
    --ba-grey-900:          #333333;
    --ba-grey-700:          #555555;
    /* Metazeilen, .text-muted. War #999999 (2,84:1 auf Weiss). #6e6e6e haelt
       4,5:1 auch auf dem Seitengrund #f9f9f9 und auf #f5f5f5 -- #767676, die
       uebliche Untergrenze, reicht nur auf reinem Weiss. */
    --ba-grey-500:          #6e6e6e;
    --ba-grey-300:          #d0d0d0;
    --ba-grey-200:          #e5e5e5;
    --ba-grey-100:          #f0f0f0;
    --ba-grey-50:           #f5f5f5;
    --ba-grey-25:           #f9f9f9;

    /* Blaugrau — Labels und Sekundaertext */
    --ba-slate-600:         #4f6173;
    /* War #6f8294 (3,96:1 auf Weiss, 3,54:1 auf #ecf3f9). */
    --ba-slate-500:         #5c6e80;
    --ba-tint-50:           #f4f7fb;
    --ba-tint-100:          #ecf3f9;   /* Kartenfuss (Artikel-Kacheln, GPS-Katalog) */

    /* Dunkle Palette — ebenfalls Primitive, nur eben die dunklen Werte */
    --ba-night-900:         #0f1923;
    --ba-night-800:         #11202f;
    --ba-night-700:         #142030;
    --ba-night-600:         #1a2535;
    --ba-night-500:         #1a3050;
    --ba-night-border:      #2a3a50;
    --ba-night-border-alt:  #3a4a60;
    --ba-night-text:        #c8d8e8;
    --ba-night-text-bright: #e0eaf5;
    --ba-night-text-muted:  #a8bcd0;
    /* War #6a8aa6 (4,26:1 auf --ba-night-600). */
    --ba-night-text-subtle: #7e9cb6;
    --ba-night-blue:        #2d6a9f;
    --ba-night-link:        #7ab3d9;
    --ba-night-link-hover:  #a8cfe8;
    /* Hover, Fokus und aktiver Seitenleisten-Punkt im Dunkeln. Stand als
       Rohwert #5788ba in dark.css (4,14:1 auf --ba-night-600). */
    --ba-night-link-active: #6d98c4;

    /* ==================================================================================================================
       EBENE 2 — SEMANTIK. Schaltet unter [data-theme="dark"] um.
       ================================================================================================================== */

    /* Flaechen */
    --ba-bg:                var(--ba-grey-25);    /* Seitenhintergrund */
    --ba-surface:           var(--ba-white);      /* Karten, Panels, Navbar */
    --ba-surface-2:         var(--ba-grey-50);    /* Wells, abgesetzte Bloecke */
    --ba-surface-3:         var(--ba-grey-100);   /* Eingelassene Bereiche */
    --ba-surface-tint:      var(--ba-tint-50);    /* Blaustichige Flaeche (Sidebar, Hinweise) */
    --ba-surface-tint-strong: var(--ba-tint-100); /* Kartenfuss; im Dunkeln wie die Karte selbst */

    /* Text */
    --ba-text:              var(--ba-grey-900);
    --ba-text-strong:       var(--ba-blue-900);
    --ba-text-soft:         var(--ba-grey-700);   /* Bio-/Fliesstext im Roster */
    --ba-text-muted:        var(--ba-slate-500);
    --ba-text-label:        var(--ba-slate-600);  /* Kleine Labels auf dem Saison-Pass */
    --ba-text-subtle:       var(--ba-grey-500);
    --ba-text-on-brand:     var(--ba-white);      /* Auf farbigem Grund — bleibt immer weiss */

    /* Raender */
    --ba-border:            var(--ba-grey-200);
    --ba-border-strong:     var(--ba-grey-300);
    --ba-border-brand:      var(--ba-blue-500);

    /* Marke in Rollen */
    --ba-primary:           var(--ba-blue-600);
    --ba-primary-alt:       var(--ba-blue-500);
    --ba-primary-deep:      var(--ba-blue-700);
    --ba-primary-hover:     var(--ba-blue-300);
    --ba-accent:            var(--ba-gold-500);
    --ba-danger:            var(--ba-red-600);
    /* Rot als TEXT, nicht als Flaeche. Getrennt, weil #9f2321 auf dunklem
       Grund nur 2.01:1 erreicht — als Flaechenfarbe mit weisser Schrift
       traegt dasselbe Rot dagegen unveraendert. */
    --ba-accent-text:       var(--ba-red-600);
    --ba-success:           var(--ba-green-600);
    --ba-success-text:      var(--ba-green-600);   /* Erfolgs-TEXT, im Dark Mode aufgehellt */

    /* Interaktion */
    --ba-link:              var(--ba-blue-600);
    --ba-link-hover:        var(--ba-blue-900);
    --ba-focus-ring:        var(--ba-gold-500);

    /* Status-Flaechen */
    --ba-warning-bg:        #fcf8e3;
    --ba-warning-text:      #8a6d3b;
    --ba-error-bg:          #f2dede;
    --ba-error-text:        #a94442;

    /* ==================================================================================================================
       Typografie, Raster, Form — themeunabhaengig
       ================================================================================================================== */

    --ba-font-body:         'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ba-font-heading:      'Roboto Slab', Georgia, 'Times New Roman', serif;
    --ba-text-sm:           14px;
    --ba-text-base:         16px;
    --ba-text-lg:           18px;
    --ba-weight-light:      300;
    --ba-weight-regular:    400;
    --ba-weight-bold:       700;
    --ba-leading:           1.6;

    /* Fluid-Groessen (Welle 4.5, Roadmap #7)
       -----------------------------------------------------------------------------------------------------------------
       Nur dort, wo der Bestand tatsaechlich zwei Groessen hatte: eine fuer
       Mobil, eine fuer Desktop, umgeschaltet bei 767px. Aus dem Sprung wird
       eine glatte Interpolation zwischen 375px und 1440px.

       Der Mobilwert ist der Boden, der Desktopwert die Decke -- es schrumpft
       also nichts, was heute schon klein ist, und es waechst nichts ueber das
       hinaus, was heute schon steht. Nur die Strecke dazwischen wird stetig
       statt als Stufe.

       Die Roadmap schlug zusaetzlich h1/h2/h3 vor, mit kleineren Untergrenzen
       als heute. Nicht uebernommen: diese drei haben gar keine Mobilvariante,
       eine Fluid-Kurve wuerde sie auf kleinen Geraeten also erstmals
       verkleinern. Das ist eine Geschmacksfrage, keine Konsolidierung.

       Formel: Untergrenze + (Differenz / Viewport-Spanne). Der rem-Anteil im
       Mittelteil ist Absicht -- reines vw ignoriert die Schriftgroesse, die
       Leute im Browser eingestellt haben.

       ACHTUNG, 1rem = 10px, nicht 16px.
       Bootstrap 3 setzt html { font-size: 10px } und skaliert body erst wieder
       auf 16px. rem bezieht sich aber auf die WURZEL, nicht auf body. Wer hier
       mit 16px rechnet, landet um Faktor 1,6 daneben -- genau das ist beim
       ersten Anlauf dieser Welle passiert (60px waren ploetzlich 37,5px).
       ----------------------------------------------------------------------------------------------------------------- */
    /* 35px auf Mobil, 45px ab Desktop */
    --ba-text-pagetitle:    clamp(3.5rem, 3.1479rem + 0.939vw, 4.5rem);
    /* 50px auf Mobil, 60px ab Desktop (Hero auf der Startseite) */
    --ba-text-hero:         clamp(5rem, 4.6479rem + 0.939vw, 6rem);

    /* Abstaende — 8px-Raster (Bootstrap-3-Basis) */
    --ba-space-xs:          4px;
    --ba-space-sm:          8px;
    --ba-space-md:          16px;
    --ba-space-lg:          24px;
    --ba-space-xl:          32px;
    --ba-space-2xl:         48px;

    /* Radien */
    --ba-radius-sm:         2px;
    --ba-radius:            4px;    /* Panels, Karten, Buttons — Bootstrap-Standard */
    --ba-radius-pill:       20px;   /* Mobile Nav-Pills */
    --ba-radius-nav:        30px;   /* Navbar-Container */

    /* Schatten — aus den im Bestand verwendeten Werten zusammengefasst */
    --ba-shadow-sm:         0 4px 5px rgba(0, 0, 0, 0.08);
    --ba-shadow:            0 6px 18px rgba(15, 40, 70, 0.08);
    --ba-shadow-lg:         0 8px 20px rgba(0, 0, 0, 0.12);

    /* Ebenen — der Bestand nutzte 1/2/3/9/10/100/999/1000/9999 ohne System */
    --ba-z-base:            1;
    --ba-z-raised:          10;
    --ba-z-sticky:          100;    /* Mobile Subnav, Affix */
    --ba-z-navbar:          1000;
    --ba-z-overlay:         1030;   /* Suchfeld, Dropdowns ueber der Navbar */
    --ba-z-modal:           1050;
    --ba-z-toast:           1080;   /* Toasts, Cookie-Sheet — ueber allem */

    /* Uebergaenge */
    --ba-transition-fast:   0.2s ease;
    --ba-transition:        0.3s ease;

    /* Breakpoints — als Dokumentation. @media kann keine Variablen lesen,
       aber diese vier Werte sind ab Welle 4.4 der verbindliche Satz:
         max-width:  480 / 767 / 991 / 1199
         min-width:  768 / 992 / 1200 */
    --ba-bp-xs:             480px;
    --ba-bp-sm:             768px;
    --ba-bp-md:             992px;
    --ba-bp-lg:             1200px;
}

/* Dark Mode — nur die SEMANTIK wird umgehaengt, die Primitive bleiben, wie sie sind.
   Umgeschaltet ueber [data-theme="dark"] auf <html> (Inline-Script in header.tpl, localStorage 'bikeaid-theme').
   Ab Welle 4.3 ist das hier die einzige Stelle, an der die Dark-Farben stehen.
   --------------------------------------------------------------------------------------------------------------------- */
[data-theme="dark"] {
    --ba-bg:                var(--ba-night-700);
    --ba-surface:           var(--ba-night-600);
    --ba-surface-2:         var(--ba-night-800);
    --ba-surface-3:         var(--ba-night-900);
    --ba-surface-tint:      var(--ba-night-500);
    --ba-surface-tint-strong: var(--ba-night-600);

    --ba-text:              var(--ba-night-text);
    --ba-text-strong:       var(--ba-night-text-bright);
    --ba-text-soft:         var(--ba-night-text);
    --ba-text-muted:        var(--ba-night-text-muted);
    --ba-text-label:        var(--ba-night-text-muted);
    --ba-text-subtle:       var(--ba-night-text-subtle);
    /* --ba-text-on-brand bleibt weiss: farbige Flaechen bleiben farbig */

    --ba-border:            var(--ba-night-border);
    --ba-border-strong:     var(--ba-night-border-alt);

    /* Das Hauptblau ist auf dunklem Grund zu leise, deshalb aufgehellt.
       Gold traegt unveraendert. Rot ebenfalls — aber nur als Flaeche
       (--ba-danger). Als Textfarbe wird es aufgehellt, sonst steht der
       Saison-Pass bei 2.01:1. */
    --ba-primary:           var(--ba-night-blue);
    --ba-accent-text:       var(--ba-red-300);
    --ba-link:              var(--ba-night-link);
    --ba-link-hover:        var(--ba-night-link-hover);

    /* Status gedaempft, damit Warnungen nicht leuchten */
    --ba-warning-bg:        #3a2a08;
    --ba-warning-text:      #f5d59a;
    --ba-error-bg:          #3a1614;
    --ba-error-text:        #ff8784;
    --ba-success-text:      var(--ba-green-300);

    /* Schatten brauchen auf dunklem Grund mehr Deckung */
    --ba-shadow-sm:         0 4px 5px rgba(0, 0, 0, 0.20);
    --ba-shadow:            0 6px 18px rgba(0, 0, 0, 0.22);
    --ba-shadow-lg:         0 8px 24px rgba(0, 0, 0, 0.30);
}
/*!
 * Bootstrap v3.3.4 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}select{background:#fff!important}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\2a"}.glyphicon-plus:before{content:"\2b"}.glyphicon-eur:before,.glyphicon-euro:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.glyphicon-tags:before{content:"\e042"}.glyphicon-book:before{content:"\e043"}.glyphicon-bookmark:before{content:"\e044"}.glyphicon-print:before{content:"\e045"}.glyphicon-camera:before{content:"\e046"}.glyphicon-font:before{content:"\e047"}.glyphicon-bold:before{content:"\e048"}.glyphicon-italic:before{content:"\e049"}.glyphicon-text-height:before{content:"\e050"}.glyphicon-text-width:before{content:"\e051"}.glyphicon-align-left:before{content:"\e052"}.glyphicon-align-center:before{content:"\e053"}.glyphicon-align-right:before{content:"\e054"}.glyphicon-align-justify:before{content:"\e055"}.glyphicon-list:before{content:"\e056"}.glyphicon-indent-left:before{content:"\e057"}.glyphicon-indent-right:before{content:"\e058"}.glyphicon-facetime-video:before{content:"\e059"}.glyphicon-picture:before{content:"\e060"}.glyphicon-map-marker:before{content:"\e062"}.glyphicon-adjust:before{content:"\e063"}.glyphicon-tint:before{content:"\e064"}.glyphicon-edit:before{content:"\e065"}.glyphicon-share:before{content:"\e066"}.glyphicon-check:before{content:"\e067"}.glyphicon-move:before{content:"\e068"}.glyphicon-step-backward:before{content:"\e069"}.glyphicon-fast-backward:before{content:"\e070"}.glyphicon-backward:before{content:"\e071"}.glyphicon-play:before{content:"\e072"}.glyphicon-pause:before{content:"\e073"}.glyphicon-stop:before{content:"\e074"}.glyphicon-forward:before{content:"\e075"}.glyphicon-fast-forward:before{content:"\e076"}.glyphicon-step-forward:before{content:"\e077"}.glyphicon-eject:before{content:"\e078"}.glyphicon-chevron-left:before{content:"\e079"}.glyphicon-chevron-right:before{content:"\e080"}.glyphicon-plus-sign:before{content:"\e081"}.glyphicon-minus-sign:before{content:"\e082"}.glyphicon-remove-sign:before{content:"\e083"}.glyphicon-ok-sign:before{content:"\e084"}.glyphicon-question-sign:before{content:"\e085"}.glyphicon-info-sign:before{content:"\e086"}.glyphicon-screenshot:before{content:"\e087"}.glyphicon-remove-circle:before{content:"\e088"}.glyphicon-ok-circle:before{content:"\e089"}.glyphicon-ban-circle:before{content:"\e090"}.glyphicon-arrow-left:before{content:"\e091"}.glyphicon-arrow-right:before{content:"\e092"}.glyphicon-arrow-up:before{content:"\e093"}.glyphicon-arrow-down:before{content:"\e094"}.glyphicon-share-alt:before{content:"\e095"}.glyphicon-resize-full:before{content:"\e096"}.glyphicon-resize-small:before{content:"\e097"}.glyphicon-exclamation-sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{content:"\e109"}.glyphicon-random:before{content:"\e110"}.glyphicon-comment:before{content:"\e111"}.glyphicon-magnet:before{content:"\e112"}.glyphicon-chevron-up:before{content:"\e113"}.glyphicon-chevron-down:before{content:"\e114"}.glyphicon-retweet:before{content:"\e115"}.glyphicon-shopping-cart:before{content:"\e116"}.glyphicon-folder-close:before{content:"\e117"}.glyphicon-folder-open:before{content:"\e118"}.glyphicon-resize-vertical:before{content:"\e119"}.glyphicon-resize-horizontal:before{content:"\e120"}.glyphicon-hdd:before{content:"\e121"}.glyphicon-bullhorn:before{content:"\e122"}.glyphicon-bell:before{content:"\e123"}.glyphicon-certificate:before{content:"\e124"}.glyphicon-thumbs-up:before{content:"\e125"}.glyphicon-thumbs-down:before{content:"\e126"}.glyphicon-hand-right:before{content:"\e127"}.glyphicon-hand-left:before{content:"\e128"}.glyphicon-hand-up:before{content:"\e129"}.glyphicon-hand-down:before{content:"\e130"}.glyphicon-circle-arrow-right:before{content:"\e131"}.glyphicon-circle-arrow-left:before{content:"\e132"}.glyphicon-circle-arrow-up:before{content:"\e133"}.glyphicon-circle-arrow-down:before{content:"\e134"}.glyphicon-globe:before{content:"\e135"}.glyphicon-wrench:before{content:"\e136"}.glyphicon-tasks:before{content:"\e137"}.glyphicon-filter:before{content:"\e138"}.glyphicon-briefcase:before{content:"\e139"}.glyphicon-fullscreen:before{content:"\e140"}.glyphicon-dashboard:before{content:"\e141"}.glyphicon-paperclip:before{content:"\e142"}.glyphicon-heart-empty:before{content:"\e143"}.glyphicon-link:before{content:"\e144"}.glyphicon-phone:before{content:"\e145"}.glyphicon-pushpin:before{content:"\e146"}.glyphicon-usd:before{content:"\e148"}.glyphicon-gbp:before{content:"\e149"}.glyphicon-sort:before{content:"\e150"}.glyphicon-sort-by-alphabet:before{content:"\e151"}.glyphicon-sort-by-alphabet-alt:before{content:"\e152"}.glyphicon-sort-by-order:before{content:"\e153"}.glyphicon-sort-by-order-alt:before{content:"\e154"}.glyphicon-sort-by-attributes:before{content:"\e155"}.glyphicon-sort-by-attributes-alt:before{content:"\e156"}.glyphicon-unchecked:before{content:"\e157"}.glyphicon-expand:before{content:"\e158"}.glyphicon-collapse-down:before{content:"\e159"}.glyphicon-collapse-up:before{content:"\e160"}.glyphicon-log-in:before{content:"\e161"}.glyphicon-flash:before{content:"\e162"}.glyphicon-log-out:before{content:"\e163"}.glyphicon-new-window:before{content:"\e164"}.glyphicon-record:before{content:"\e165"}.glyphicon-save:before{content:"\e166"}.glyphicon-open:before{content:"\e167"}.glyphicon-saved:before{content:"\e168"}.glyphicon-import:before{content:"\e169"}.glyphicon-export:before{content:"\e170"}.glyphicon-send:before{content:"\e171"}.glyphicon-floppy-disk:before{content:"\e172"}.glyphicon-floppy-saved:before{content:"\e173"}.glyphicon-floppy-remove:before{content:"\e174"}.glyphicon-floppy-save:before{content:"\e175"}.glyphicon-floppy-open:before{content:"\e176"}.glyphicon-credit-card:before{content:"\e177"}.glyphicon-transfer:before{content:"\e178"}.glyphicon-cutlery:before{content:"\e179"}.glyphicon-header:before{content:"\e180"}.glyphicon-compressed:before{content:"\e181"}.glyphicon-earphone:before{content:"\e182"}.glyphicon-phone-alt:before{content:"\e183"}.glyphicon-tower:before{content:"\e184"}.glyphicon-stats:before{content:"\e185"}.glyphicon-sd-video:before{content:"\e186"}.glyphicon-hd-video:before{content:"\e187"}.glyphicon-subtitles:before{content:"\e188"}.glyphicon-sound-stereo:before{content:"\e189"}.glyphicon-sound-dolby:before{content:"\e190"}.glyphicon-sound-5-1:before{content:"\e191"}.glyphicon-sound-6-1:before{content:"\e192"}.glyphicon-sound-7-1:before{content:"\e193"}.glyphicon-copyright-mark:before{content:"\e194"}.glyphicon-registration-mark:before{content:"\e195"}.glyphicon-cloud-download:before{content:"\e197"}.glyphicon-cloud-upload:before{content:"\e198"}.glyphicon-tree-conifer:before{content:"\e199"}.glyphicon-tree-deciduous:before{content:"\e200"}.glyphicon-cd:before{content:"\e201"}.glyphicon-save-file:before{content:"\e202"}.glyphicon-open-file:before{content:"\e203"}.glyphicon-level-up:before{content:"\e204"}.glyphicon-copy:before{content:"\e205"}.glyphicon-paste:before{content:"\e206"}.glyphicon-alert:before{content:"\e209"}.glyphicon-equalizer:before{content:"\e210"}.glyphicon-king:before{content:"\e211"}.glyphicon-queen:before{content:"\e212"}.glyphicon-pawn:before{content:"\e213"}.glyphicon-bishop:before{content:"\e214"}.glyphicon-knight:before{content:"\e215"}.glyphicon-baby-formula:before{content:"\e216"}.glyphicon-tent:before{content:"\26fa"}.glyphicon-blackboard:before{content:"\e218"}.glyphicon-bed:before{content:"\e219"}.glyphicon-apple:before{content:"\f8ff"}.glyphicon-erase:before{content:"\e221"}.glyphicon-hourglass:before{content:"\231b"}.glyphicon-lamp:before{content:"\e223"}.glyphicon-duplicate:before{content:"\e224"}.glyphicon-piggy-bank:before{content:"\e225"}.glyphicon-scissors:before{content:"\e226"}.glyphicon-bitcoin:before{content:"\e227"}.glyphicon-btc:before{content:"\e227"}.glyphicon-xbt:before{content:"\e227"}.glyphicon-yen:before{content:"\00a5"}.glyphicon-jpy:before{content:"\00a5"}.glyphicon-ruble:before{content:"\20bd"}.glyphicon-rub:before{content:"\20bd"}.glyphicon-scale:before{content:"\e230"}.glyphicon-ice-lolly:before{content:"\e231"}.glyphicon-ice-lolly-tasted:before{content:"\e232"}.glyphicon-education:before{content:"\e233"}.glyphicon-option-horizontal:before{content:"\e234"}.glyphicon-option-vertical:before{content:"\e235"}.glyphicon-menu-hamburger:before{content:"\e236"}.glyphicon-modal-window:before{content:"\e237"}.glyphicon-oil:before{content:"\e238"}.glyphicon-grain:before{content:"\e239"}.glyphicon-sunglasses:before{content:"\e240"}.glyphicon-text-size:before{content:"\e241"}.glyphicon-text-color:before{content:"\e242"}.glyphicon-text-background:before{content:"\e243"}.glyphicon-object-align-top:before{content:"\e244"}.glyphicon-object-align-bottom:before{content:"\e245"}.glyphicon-object-align-horizontal:before{content:"\e246"}.glyphicon-object-align-left:before{content:"\e247"}.glyphicon-object-align-vertical:before{content:"\e248"}.glyphicon-object-align-right:before{content:"\e249"}.glyphicon-triangle-right:before{content:"\e250"}.glyphicon-triangle-left:before{content:"\e251"}.glyphicon-triangle-bottom:before{content:"\e252"}.glyphicon-triangle-top:before{content:"\e253"}.glyphicon-console:before{content:"\e254"}.glyphicon-superscript:before{content:"\e255"}.glyphicon-subscript:before{content:"\e256"}.glyphicon-menu-left:before{content:"\e257"}.glyphicon-menu-right:before{content:"\e258"}.glyphicon-menu-down:before{content:"\e259"}.glyphicon-menu-up:before{content:"\e260"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.small,small{font-size:85%}.mark,mark{padding:.2em;background-color:#fcf8e3}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#337ab7}a.text-primary:hover{color:#286090}.text-success{color:#3c763d}a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;margin-left:-5px;list-style:none}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dd,dt{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #777}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child{margin-bottom:0}blockquote .small,blockquote footer,blockquote small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote .small:before,blockquote footer:before,blockquote small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before{content:''}.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;-webkit-box-shadow:none;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}table col[class*=col-]{position:static;display:table-column;float:none}table td[class*=col-],table th[class*=col-]{position:static;display:table-cell;float:none}.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#f5f5f5}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover{background-color:#e8e8e8}.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#dff0d8}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover{background-color:#d0e9c6}.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#d9edf7}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover{background-color:#c4e3f3}.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#fcf8e3}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover{background-color:#faf2cc}.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#f2dede}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal}input[type=file]{display:block}input[type=range]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}input[type=search]{-webkit-appearance:none}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=date],input[type=time],input[type=datetime-local],input[type=month]{line-height:34px}.input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm{line-height:30px}.input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg{line-height:46px}}.form-group{margin-bottom:15px}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.checkbox label,.radio label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-top:4px \9;margin-left:-20px}.checkbox+.checkbox,.radio+.radio{margin-top:-5px}.checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{cursor:not-allowed}.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}select[multiple].input-sm,textarea.input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.form-group-sm .form-control{height:30px;line-height:30px}select[multiple].form-group-sm .form-control,textarea.form-group-sm .form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:5px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}select[multiple].input-lg,textarea.input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.form-group-lg .form-control{height:46px;line-height:46px}select[multiple].form-group-lg .form-control,textarea.form-group-lg .form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:10px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.input-lg+.form-control-feedback{width:46px;height:46px;line-height:46px}.input-sm+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;background-color:#fcf8e3;border-color:#8a6d3b}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .checkbox label,.form-inline .radio label{padding-left:0}.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .checkbox,.form-horizontal .radio{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:14.33px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{pointer-events:none;cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{background-image:none}.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary.active,.btn-primary.focus,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.active,.btn-success.focus,.btn-success:active,.btn-success:focus,.btn-success:hover,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.active,.btn-info.focus,.btn-info:active,.btn-info:focus,.btn-info:hover,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{background-image:none}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled.focus,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled].focus,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.active,.btn-warning.focus,.btn-warning:active,.btn-warning:focus,.btn-warning:hover,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled,.btn-warning.disabled.active,.btn-warning.disabled.focus,.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled],.btn-warning[disabled].active,.btn-warning[disabled].focus,.btn-warning[disabled]:active,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning.active,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.active,.btn-danger.focus,.btn-danger:active,.btn-danger:focus,.btn-danger:hover,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled,.btn-danger.disabled.active,.btn-danger.disabled.focus,.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled],.btn-danger[disabled].active,.btn-danger[disabled].focus,.btn-danger[disabled]:active,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger.active,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{font-weight:400;color:#337ab7;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#777;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-right:4px solid transparent;border-left:4px solid transparent}.dropdown,.dropup{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px solid}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*=col-]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn,textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn,textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn{height:auto}.input-group .form-control,.input-group-addon,.input-group-btn{display:table-cell}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#777}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px)and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-top:8px;margin-right:-15px;margin-bottom:8px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1)}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#9d9d9d}.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover{color:#444;background-color:transparent}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover{color:#fff;background-color:#080808}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}}.navbar-inverse .navbar-link{color:#9d9d9d}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#9d9d9d}.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover{color:#fff}.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#777}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{color:#23527c;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:2;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#777}.label-default[href]:focus,.label-default[href]:hover{background-color:#5e5e5e}.label-primary{background-color:#337ab7}.label-primary[href]:focus,.label-primary[href]:hover{background-color:#286090}.label-success{background-color:#5cb85c}.label-success[href]:focus,.label-success[href]:hover{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:focus,.label-info[href]:hover{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:focus,.label-warning[href]:hover{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:focus,.label-danger[href]:hover{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;background-color:#777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-group-xs>.btn .badge,.btn-xs .badge{top:0;padding:1px 5px}a.badge:focus,a.badge:hover{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding:30px 15px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron .h1,.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding:48px 0}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron .h1,.jumbotron h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail a>img,.thumbnail>img{margin-right:auto;margin-left:auto}a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover{border-color:#337ab7}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-body,.media-left,.media-right{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}a.list-group-item{color:#555}a.list-group-item .list-group-item-heading{color:#333}a.list-group-item:focus,a.list-group-item:hover{color:#555;text-decoration:none;background-color:#f5f5f5}.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{color:#777;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{color:#777}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{z-index:2;color:#fff;background-color:#337ab7;border-color:#337ab7}.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{color:#c7ddef}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:focus,a.list-group-item-success:hover{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:focus,a.list-group-item-info:hover{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:focus,a.list-group-item-warning:hover{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:focus,a.list-group-item-danger:hover{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:3px;border-top-right-radius:3px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-right:15px;padding-left:15px}.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#337ab7}.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7}.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{min-height:16.43px;padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.4;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.42857143;text-align:left;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow{border-width:11px}.popover>.arrow:after{content:"";border-width:10px}.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);filter:alpha(opacity=50);opacity:.5}.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000 \9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px)and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px)and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px)and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px)and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px)and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px)and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px)and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px)and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px)and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px)and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table}tr.visible-print{display:table-row!important}td.visible-print,th.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}}/* CSS @ MBecker2015 */

/* Self-hosted Google Fonts (DSGVO — no external requests to Google)
--------------------------------------------------------------------------------------------------------------------- */
/* Beide Dateien sind VARIABLE Fonts mit einer wght-Achse. Deshalb steht hier
   je EIN @font-face mit der vollen Achsen-Range statt mehrerer mit je einem
   festen Gewicht: mit Einzelwerten kennt der Browser nur die deklarierten
   Stufen, jeder andere font-weight faellt auf die naechstgelegene zurueck.
   Konkret renderte Roboto Slab 700 (die Section-Titel der Mobile-Startseite)
   in Normalstaerke, weil es nur Faces fuer 300 und 400 gab, und Open Sans 600
   kam als 700 heraus.
   Die Ranges sind die echten Achsengrenzen der beiden Dateien, im Browser
   ausgemessen (2026-08-30) — darueber hinaus clampt der Renderer ohnehin. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url('/media/fonts/open-sans-v44-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/media/fonts/roboto-slab-v36-latin.woff2') format('woff2');
}

/* Common
--------------------------------------------------------------------------------------------------------------------- */
html {
    overflow-x: clip;
}
body {
    overflow-x: clip;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--ba-blue-900);
}
/* Bis 2026-09-23 stand hier fuer <= 767px `body { font-family: sans-serif }`
   (seit 2015, ohne Begruendung) -- mobil lief damit fast alles in der
   Systemschrift statt Open Sans, gemischt mit den Stellen, die Open Sans
   ausdruecklich setzen. Die Schrift liegt lokal (43 KB, font-display: swap),
   ein Grund fuers Weglassen besteht nicht mehr. */
p {
    line-height: 26px;
}
h1, h2, h3, h4 {
    line-height: normal;
    font-family: 'Roboto Slab';
    font-weight: 300;
    /* Deutsche Komposita ("Mitgliederversammlung" = 342px bei 30px) sind
       breiter als eine schmale Spalte und liefen sonst in die Sidebar.
       hyphens:auto trennt sauber (html lang="de"), break-word ist der
       Notnagel, wenn selbst die Silbe nicht passt. */
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}
/* h2.as-h1: als h2 gegliedert, sieht aus wie h1 -- fuer Listen-Teaser und die
   von Helper_Headings herabgestuften Ueberschriften (genau eine h1 je Seite). */
h1, h1 a, h2.as-h1, h2.as-h1 a {
    font-size: 30px;
    font-weight: 300;
}
h1.pagetitle, h2.pagetitle {
    display: block;
    margin: 0 0 50px;
    padding-bottom: 20px;
    font-size: var(--ba-text-pagetitle);
    border-bottom: 4px double var(--ba-grey-200);
}
h2, h2 a{
    font-size: 22px;
    font-weight: 300;
}
h3, h3 a {
    font-size: 20px;
    font-weight: 400;
}
h4, h4 a {
    font-size: 16px;
    font-weight: 700;
}
small {
    font-size: 14px;
}
.text-muted {
    color: var(--ba-text-subtle);
}
.dl-horizontal dt {
    text-align: left;
    white-space: normal;
    overflow: hidden;
}
.dl-horizontal dd {
    margin: 0;
    padding: 0 0 10px 180px;
}
hr {
    clear: both;
    margin: 40px 0;
    height: 3px;
    border-top: 1px solid var(--ba-grey-200);
    border-right: 0;
    border-bottom: 1px solid var(--ba-grey-200);
    border-left: 0;
}
.l-start hr {
    margin: 45px 0;
}
.badge {
    background: var(--ba-blue-500);
}
@media (max-width: 767px) {
    .dl-horizontal dd {
        padding: 0 0 10px 0 !important;
    }
    h1.pagetitle, h2.pagetitle {
        margin: 0 0 20px;
    }
    .l-start hr {
        margin: 30px 0;
    }
}
.notice {
    box-shadow: 0 0 120px rgba(0, 0, 0, 1);
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 999;
}
.notice.alert-danger a {
    color: #a94442;
    display: block;
}
.notice.alert-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.notice.alert-notice {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.notice .btn-close > span {
    position: relative;
    top: -2px;
    font-size: 26px;
    margin: 0 0 0 10px;
    vertical-align: middle;
}

/* Links + Buttons
------------------------------------ */
a:link, a:visited,
input[type="submit"].btn {
    color: var(--ba-red-600);
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
a:hover, a:focus, a:active {
    color: var(--ba-blue-600);
    text-decoration: none;
}

/* Accessibility: Focus Rings (Design #14)
--------------------------------------------------------------------------------------------------------------------- */
/* Keyboard-only focus ring: Logo-Gold, consistent across all interactive elements */
*:focus-visible {
    outline: 3px solid var(--ba-gold-500) !important;
    outline-offset: 3px !important;
    border-radius: 3px;
}
/* Buttons/inputs already have a border-radius — tighten offset */
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 2px !important;
}

/* Default Button */
.btn-default,
.btn.btn-secondary {
    position: relative;
    overflow: hidden;
    z-index: 100;
    background: var(--ba-blue-500);
    border: 0 none;
    border-radius: 5px;
}
.btn-default {
    color: var(--ba-text-on-brand) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.open > .dropdown-toggle.btn-default,
.dropdown .btn-default:hover {
    background: var(--ba-blue-600);
    color: var(--ba-text-on-brand);
}
input[type="submit"].btn {
    border: 0 none;
}

.component-event-detail .btn-green {
    background: var(--ba-green-600);
    box-shadow: 0 4px 0 #0b6200;
}

.component-event-list .btn-participate {
    border: 2px solid var(--ba-red-600) !important;
    background: var(--ba-red-600) !important;
    color: var(--ba-text-on-brand) !important;
}

.component-event-list .btn-withdraw {
    border: 2px solid var(--ba-green-600) !important;
    background: var(--ba-green-600) !important;
    color: var(--ba-text-on-brand) !important;
}

/* Veranstaltungen: Aktionsleiste je Termin (docs/veranstaltungen-merken.md).
   Formular und Kalender-Gruppe sind nur Huellen, ihre Knoepfe reihen sich mit
   ein; als Block rutschte „Merken“ sonst in eine eigene Zeile. */
.event-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.event-actions form,
.event-actions .event-calendar {
    display: contents;
}
.event-actions .btn {
    margin: 0;
}
/* Pfeil: dieser Knopf verlaesst die Seite */
.btn-external::after {
    content: " \2197";
}
.event-action-hint {
    margin-top: 6px;
}
/* Wann und wo unter dem Titel, vergangene Termine mit Hinweis (UX-Review U9) */
.event-when-where {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0 0 14px;
    font-size: var(--ba-text-lg);
    color: var(--ba-text-strong);
}
.event-when-where .event-when,
.event-when-where .event-where {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}
.event-when-where svg {
    flex: 0 0 auto;
    margin-top: 0.2em;
    color: var(--ba-text-muted);
}
.event-when-where.is-past .event-when,
.event-when-where.is-past .event-where {
    color: var(--ba-text-muted);
}
.event-past-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--ba-radius-pill);
    background: var(--ba-warning-bg);
    color: var(--ba-warning-text);
    font-size: var(--ba-text-sm);
    font-weight: var(--ba-weight-bold);
}

    /* Secondary Button */
.btn.btn-secondary {
    background: 0 none;
    border: 2px solid var(--ba-blue-500);
    color: var(--ba-blue-500);
}
.btn.btn-secondary:hover {
    border: 2px solid transparent;
}

/* Big Red */
.btn-primary {
    padding: 10px 60px;
    border: 0 none;
    background: var(--ba-red-600);
    box-shadow: 0 4px 0 #630200;
    font-size: 18px;
    font-weight: 300;
    color: var(--ba-text-on-brand) !important;
    text-transform: uppercase;
}
/* Lange Beschriftungen ("Mitgliedsantrag herunterladen") sprengten auf
   Handybreite die 60px-Seitenpolster plus Bootstraps white-space:nowrap --
   der Text lief abgeschnitten aus dem Button. Mobil umbrechen lassen. */
@media (max-width: 767px) {
    .btn-primary {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        white-space: normal;
    }
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    margin: 4px 0 -4px;
    background: #871514;
    box-shadow: none;
}
.sidebar .btn {
    width: 100%;
}

@media (max-width: 767px) {
    .btn {
        width: 100%;
    }
}

/* Images + Thumbnails
------------------------------------ */
.sidebar img {
    width: 100%;
    height: auto;
}
.thumbnail {
    border-radius: 4px;
    border: 0 none;
    padding: 0;
}
.img-responsive {
    border-radius: 4px;
}
.thumbnail.pull-left {
    margin: 8px 15px 15px 0;
}
.thumbnail.pull-right {
    margin: 8px 15px 0 15px;
}
.thumbnail.pull-above {
    margin: 0 0 15px;
}
.thumbnail.pull-below {
    margin: 15px 0 0;
}
.thumbnail.caption {
    margin-top: -4px;
    padding: 5px;
    border-radius: 0 0 4px 4px;
    background: var(--ba-grey-25);
}
@media (max-width: 767px) {
    .img-responsive {
        width: 100%;
        height: auto;
    }
}
@media (max-width: 650px) {
    .thumbnail.pull-left,
    .thumbnail.pull-right {
        float: none;
        margin: 8px 0 15px 0;
        width: 100%;
        height: auto;
    }
}

/* Wells
------------------------------------ */
.well {
    background: 0 none;
    border: 2px solid #ececec;
    box-shadow: none;
}
.well h2 {
    margin-top: 0;
}

/* CBox
------------------------------------ */
#cboxOverlay {
    background: -moz-linear-gradient(top, rgba(0,0,0,0.29) 0%, rgba(0,0,0,1) 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.29)), color-stop(100%,rgba(0,0,0,1))) !important;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.29) 0%,rgba(0,0,0,1) 100%) !important;
    background: -o-linear-gradient(top, rgba(0,0,0,0.29) 0%,rgba(0,0,0,1) 100%) !important;
    background: -ms-linear-gradient(top, rgba(0,0,0,0.29) 0%,rgba(0,0,0,1) 100%) !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.29) 0%,rgba(0,0,0,1) 100%) !important;
}

/* Structure
--------------------------------------------------------------------------------------------------------------------- */
.container {
    position: relative;
}
.component,
.sidebar {
    margin-bottom: 30px;
}
.l-start {
    margin: 160px 0 0;
}
.l-content {
    position: relative;
    z-index: 2;
    background: var(--ba-white);
}
.l-footer {
    padding-top: 20px;
    background: var(--ba-white);
}
.visible-xxs {
    display: none;
}
@media (max-width: 991px) {
    .l-content {
        padding-top: 30px;
    }
}
@media (max-width: 480px) {
    .col-xxs {
        float: none;
        width: 100%;
    }
    .visible-xxs {
        display: block;
    }
}

/* Top (Logo, Navi, etc.)
--------------------------------------------------------------------------------------------------------------------- */
.navbar {
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 50px;
    background: 0 none;
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar .navbar-collapse {
    padding: 0;
}
.navbar .container {
    position: relative;
    padding-right: 0;
    height:60px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    border-radius: 30px;
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.event-button {
    position: absolute;
    left: 120px;
    top: 14px;
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.affix .event-button {
    left: 80px;
    right: auto;
    top: 14px;
}
/* Affix: show calendar as compact icon-only button */
.affix .event-btn-text {
    display: none;
}
.affix .event-btn-icon {
    display: inline;
}
.affix .event-button .btn {
    padding: 6px 9px;
    line-height: 1;
}
.event-button .btn {
    background: var(--ba-red-600);
    color: var(--ba-text-on-brand);
}
.event-btn-icon {
    display: none;
}
@media (max-width: 1199px) {
    .event-button {
        left: 100px;
    }
    .affix .event-button {
        top: 14px;
        right: 244px;
    }
}
@media (max-width: 991px) {
    .event-btn-text {
        display: none;
    }
    .event-btn-icon {
        display: inline;
    }
    .event-button .btn {
        padding: 6px 9px;
        line-height: 1;
    }
}
@media (max-width: 560px) {
    .navbar-left-cluster {
        left: 70px;
    }
}

/* Logo
------------------------------------ */
.logo img {
    margin: -30px 0 0 -22px;
    width:100px;
    height: 109px;
    transform: rotate(-10deg);
    transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.logo:hover img {
    transform: rotate(0deg);
}

/* Navigation
------------------------------------ */
.navbar-nav {
    margin-right:10px;
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar-nav > li > a {
    padding: 20px 15px;
    text-transform: uppercase;
    font-weight: 300;
    color: var(--ba-red-600);
}
.navbar-nav > li.active > a {
    color: var(--ba-blue-600);
    font-weight: bold;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li > a:active {
    color: var(--ba-blue-600);
    background: 0 none;
}
#navbar li:has(> a[href$="/shop"]),
#navbar li:has(> a[href$="/shop/"]),
.mobile-mainnav li:has(> a[href$="/shop"]),
.mobile-mainnav li:has(> a[href$="/shop/"]) {
    display: none;
}
.navbar-toggle {
    margin: 0;
    padding: 12px 6px;
    color: var(--ba-black);
    line-height: 1;
}
.user-avatar-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--ba-grey-700);
    color: var(--ba-text);
    background: transparent;
}
.user-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.navbar-icon-group {
    float: right;
    display: flex;
    align-items: center;
}
#navbar-cart {
    display: flex;
    align-items: center;
    padding: 18px 12px;
    color: var(--ba-black);
    line-height: 1;
    text-decoration: none;
}
#dark-mode-toggle {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin: 13px 2px;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1;
    color: #333;
    opacity: 0.65;
    transition: opacity 0.2s ease, color 0.2s ease;
}
#dark-mode-toggle:hover {
    opacity: 1;
    background: none;
}
#dark-mode-toggle svg {
    width: 24px;
    height: 24px;
    display: block;
}
#navbar-cart:hover {
    opacity: 0.7;
}

/* Login
------------------------------------ */
.navbar .login {
    margin-right: 15px;
}
.navbar .login > .btn {
    border-radius: 4px 20px 20px 4px;
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar .dropdown {
    margin-top: 15px;
}
.navbar .dropdown-menu {
    top: 60px;
    min-width: 200px;
}
.navbar .dropdown-menu .arrow {
    height: auto;
    position: absolute;
    right: 20px;
    top: -7px;
    width: 16px;
}
.navbar .dropdown form {
    position: inherit;
    width: 200px;
}
.navbar .dropdown .form-group {
    margin: 5px 10px 10px;
}
.navbar .dropdown ul .form-group a {
    margin-top: 5px;
    padding: 0;
    font-size: 12px;
}
.navbar .dropdown-menu .btn {
    width: 90%;
}
@media (max-width: 991px) {
    .navbar .login {
        float: none;
        width: 100%;
        margin: 0;
    }
    .navbar .dropdown-toggle,
    .navbar .arrow {
        display: none;
    }
    .navbar .dropdown form {
        width: 100%;
    }
    .navbar .dropdown-menu {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        border: 0 none;
        border-radius: 0;
        top: 0;
        left: 0;
        box-shadow: none;
        background: 0 none;
    }
    .navbar .dropdown .form-group {
        margin: 5px 0 10px;
    }
}

/* Login - User logged in
------------------------------------ */
.navbar .dropdown.user {
    margin: 0;
}
.navbar .user .dropdown-menu {
    top: 75px;
}
.navbar .dropdown.user button {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: 2px solid var(--ba-blue-500);
    background-image: url("/media/images/default/no-biker-image.svg");
    background-repeat: no-repeat ;
    background-position: center center;
    background-size: cover;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
.navbar .dropdown.user button:hover {
    opacity: 0.8;
}
.navbar .dropdown ul a,
.navbar .dropdown ul span {
    display: block;
    padding: 5px 10px;
}
.navbar .dropdown ul .btn {
    color: var(--ba-text-on-brand);
    margin: 5px 10px;
}

/* Login im Seiteninhalt: Hinweis fuer Ausgeloggte auf geschuetzten Seiten
   (Controller_Frontend_LoginRequired, login_inline.tpl)
------------------------------------ */
.login-inline {
    max-width: 420px;
}
.login-inline .submit-area {
    margin: 20px 0 14px;
}
.login-inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
}
@media (max-width: 991px) {
    .navbar .user {
        float: none;
        width: 100%;
        margin: 0;
    }
    .navbar .user .dropdown-menu {
        border-top: 1px solid var(--ba-grey-200);
        font-weight: bold;
        margin-top: 5px;
        padding: 5px 15px 10px;
        top: 0;
    }
    .navbar .user .dropdown-menu .btn {
        width: 100% !important;
        margin: 4px 0 !important;
    }
}

/* Search
------------------------------------ */
.navbar form {
    position: absolute;
    top: -43px;
    right: 0;
    width: 300px;
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar form button {
    position: absolute;
    height: 34px;
    width: 34px;
    top: 0;
    right: 10px;
    border: 0 none;
    background: 0 none;
}
.navbar form button:hover {
    background: var(--ba-grey-50);
}
.navbar form button img {
    width: 16px;
}

/* Nur noch die Lupe: das Eingabefeld ist seit 2026-10-04 das Overlay
   .search-overlay (Block "Search Overlay" direkt darunter). Vorher klappte
   hier ein 220-430px breites Feld auf, in dem laengere Begriffe nicht
   lesbar waren. Hoehe fest, weil das Formular sonst nur den absolut
   positionierten Knopf enthaelt und 0px hoch waere. */
.navbar form.search {
    width: 44px;
    height: 34px;
}

/* Search Overlay
   Markup am Ende von shared/footer.tpl, Steuerung in page.js. [hidden] muss
   ausdruecklich auf none, sonst gewinnt display:flex gegen das UA-Stylesheet.
------------------------------------ */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ba-z-modal);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12vh 24px 24px;
    background: rgba(15, 25, 35, 0.6);
    opacity: 0;
    transition: opacity 150ms ease;
}
.search-overlay[hidden] {
    display: none;
}
.search-overlay.is-visible {
    opacity: 1;
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
    .search-overlay {
        background: rgba(15, 25, 35, 0.35);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}
.search-overlay-panel {
    width: 100%;
    max-width: 768px; /* px, nicht rem: Bootstrap 3 setzt html auf 10px */
    transform: translateY(-8px);
    transition: transform 150ms ease;
}
.search-overlay.is-visible .search-overlay-panel {
    transform: none;
}
.search-overlay form {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 20px;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
/* Der Ring (#14) sitzt am Formular, nicht am Feld: das Feld hat keinen
   eigenen Rand, und Lupe wie Schliessen-Knopf gehoeren optisch mit hinein.
   Das !important am Feld schlaegt das von *:focus-visible, sonst laeuft ein
   zweiter Ring innen ums Feld. */
.search-overlay form:focus-within {
    outline: 3px solid var(--ba-focus-ring);
    outline-offset: 3px;
}
.search-overlay input:focus-visible {
    outline: none !important;
}
.search-overlay-icon {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--ba-primary);
}
.search-overlay input {
    flex: 1 1 auto;
    min-width: 0;
    height: 64px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--ba-text);
    font-size: 24px;
    line-height: 1.2;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.search-overlay input::placeholder {
    color: var(--ba-text-muted);
    opacity: 1;
}
/* Das native Loeschen-x von type=search stand direkt neben unserem
   Schliessen-x und war davon nicht zu unterscheiden. */
.search-overlay input::-webkit-search-cancel-button,
.search-overlay input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.search-overlay-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ba-text-muted);
    cursor: pointer;
}
.search-overlay-close:hover {
    background: var(--ba-surface-2);
    color: var(--ba-text);
}
.search-overlay-close svg {
    width: 20px;
    height: 20px;
}
.search-overlay-hint {
    margin: 10px 4px 0;
    color: var(--ba-white);
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Esc und Enter gibt es auf dem Handy nicht. */
@media (hover: none) {
    .search-overlay-hint {
        display: none;
    }
}
body.search-overlay-open {
    overflow: hidden;
}
@media (max-width: 767px) {
    .search-overlay {
        padding: calc(16px + env(safe-area-inset-top)) 16px 16px;
    }
    .search-overlay form {
        padding-left: 14px;
        border-radius: 14px;
    }
    .search-overlay-icon {
        width: 20px;
        height: 20px;
    }
    /* Mindestens 16px, sonst zoomt iOS beim Fokussieren in die Seite. */
    .search-overlay input {
        height: 56px;
        font-size: 18px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .search-overlay,
    .search-overlay-panel {
        transition: none;
    }
}
@media (prefers-reduced-transparency: reduce) {
    .search-overlay {
        background: rgba(15, 25, 35, 0.75);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Flags
   Nur noch kosmetische Basis-Styles: die Positionierung (Desktop-Zeile ab
   1200px, md-Streifen 992-1199px) steht gesammelt im Block "Utility-Icons"
   weiter unten; auf Mobile uebernimmt .navbar-left-cluster.
------------------------------------ */
.lang {
    display: flex;
    align-items: center;
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Trigger: aktives Kuerzel + Chevron (UCI-Pattern), 34px-Box wie die
   uebrigen Utility-Icons. Ueberschreibt die .navbar .dropdown-Regeln,
   die fuers Login gedacht sind (margin-top 15px, Menue top 60px). */
.navbar .lang.dropdown {
    margin-top: 0;
}
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    padding: 5px 8px;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.lang-toggle:hover,
.lang.open .lang-toggle {
    opacity: 1;
}
.lang-chevron {
    width: 12px;
    height: 12px;
}
.navbar .lang .dropdown-menu {
    top: 100%;
    left: auto;
    right: 0;
    min-width: 0;
    margin: 2px 0 0;
    padding: 4px;
    border-radius: 8px;
}
/* .navbar davor noetig: .navbar .dropdown ul a (Login-Dropdown) hat sonst
   die hoehere Spezifitaet und erzwingt display:block. */
.navbar .lang .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    white-space: nowrap;
    line-height: 1.2;
}
.navbar .lang .dropdown-menu img {
    width: 24px;
    height: 14px;
    display: block;
    border-radius: 2px;
}
/* Mobil macht die Login-Regel (.navbar .dropdown-menu: display block,
   position relative, ohne Rahmen) jedes Navbar-Dropdown dauerhaft auf -
   fuer das Sprachmenue hier zurueckdrehen: zu bis .open, klappt absolut
   unter dem Trigger aus. */
@media (max-width: 991px) {
    .navbar .lang .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        width: auto;
        margin: 2px 0 0;
        padding: 4px;
        background: var(--ba-white);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 8px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    }
    .navbar .lang.open .dropdown-menu {
        display: block;
    }
}

/* Affix
------------------------------------ */
.navbar.affix {
    top: -1px;
}
.navbar.affix .container {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 0 0 30px 4px;
}
.navbar.affix .logo img {
    margin: 0 0 0 -5px;
    width: 50px;
    height: 50px;
    transform: none;
}
.navbar.affix .dropdown.user button {
    border-radius: 50% 0 50% 50%
}
.navbar.affix .login > .btn {
    border-radius: 4px 0 20px 4px;
}

/* Mobile Navigation
------------------------------------ */
@media (max-width: 1199px) {
    /* Bootstrap-md (992-1199px): Container ist nur 970px breit. Logo + Menue
       + reservierter Rechtsrand + Login muessen in EINE Zeile passen, sonst
       bricht die float-right .navbar-collapse um und das Menue malt aus der
       60px hohen Pill heraus ueber den Seiteninhalt. */
    /* Platzhalter: Die md-Regeln fuer Nav-Rand und Paddings stehen
       zustandsunabhaengig im Block "Utility-Icons" weiter unten. */
}

/* Utility-Icons (Suche, Sprache, Dark Mode, Cart) - Desktop
   Ab 992px sitzt die komplette Icon-Reihe rechts in der Navbar-Zeile neben
   dem Login, in BEIDEN Scroll-Zustaenden an identischer Position - nichts
   springt beim Scrollen, und der Streifen ueber der Leiste bleibt auf
   Desktop leer:
   [Sprache 234] [Suche 184] [Mond 140] [Cart 96] [Login] - je 6px Abstand
   Die Sprache steht bewusst LINKS aussen: sie erscheint nur auf Start,
   /racing und der EN-Seite. Stuende sie mittendrin, klaffte ueberall sonst
   eine Luecke im Cluster - so beginnt die Reihe dort einfach weiter rechts.
   Alle Boxen sind 34px hoch und stehen auf top 14px, also mittig in der
   60px hohen Pill - dadurch fluchten die optischen Mitten exakt.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .lang {
        position: absolute;
        height: 34px;
        margin: 0;
        top: 14px;
        right: 234px;
    }
    #dark-mode-toggle,
    #navbar-cart {
        position: absolute;
        float: none;
        margin: 0;
        padding: 5px 7px;
        top: 14px;
    }
    #dark-mode-toggle {
        right: 140px;
    }
    #navbar-cart {
        right: 96px;
    }
    /* Kein width hier: .navbar form.search ist nur die 44px-Lupe, das
       Eingabefeld ist das Overlay (.search-overlay). */
    .navbar form.search {
        top: 14px;
        right: 184px;
    }
    /* Der Event-Button zeigt auf Desktop durchgaengig nur sein
       Kalender-Icon - im Affix-Zustand und unter 992px tat er das ohnehin
       schon. Mit ausgeschriebenem "Biketreffs & Termine" passen Button,
       sieben Nav-Items, Icon-Reihe und Login nicht nebeneinander, dann
       waechst die rechts gefloatete Nav nach links unter den Button und
       verdeckt HOME. So bleibt die Nav bei ihren Basis-Paddings. */
    .event-btn-text {
        display: none;
    }
    .event-btn-icon {
        display: inline;
    }
    .event-button .btn {
        padding: 6px 9px;
        line-height: 1;
    }
    /* Nur die Hauptnavigation in #navbar: die mobile Scroll-Leiste
       (.mobile-mainnav .navbar-nav) haette den Rechtsrand sonst als toten
       Scrollweg mitgeschleppt. */
    .navbar #navbar .navbar-nav {
        margin-right: 215px;
        margin-left: 30px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    /* Bootstrap-md: Container nur 970px statt 1170px - hier reicht es
       trotz Icon-Button nicht fuer die Basis-Paddings. */
    .navbar #navbar .navbar-nav {
        margin-right: 209px;
        margin-left: 20px;
    }
    .navbar #navbar .navbar-nav > li > a {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 13px;
    }
}
@media (max-width: 991px) {
    .navbar {
        top: -1px;
    }
    .navbar .container,
    .navbar.affix .container{
        padding: inherit;
        height: auto;
        min-height: 60px;
        /* Randlos wie die Subnav darunter: Bootstraps .container ist ab 768px
           auf 750px fixiert und zentriert - dann lief der Seiteninhalt links
           und rechts neben der Leiste durch, waehrend die Subnav ueber die
           volle Breite ging. */
        width: 100%;
        max-width: none;
        /* Oben gerade: die Leiste klebt auf Mobile immer am Viewport-Rand
           (top:-1px), da ist keine Luft zum Runden - die Oberecken waren nur
           Kerben, in denen der Hintergrund durchblitzte. Desktop macht es im
           Affix-Zustand genauso. Die Rundung traegt die Unterkante. */
        border-radius: 0 0 30px 30px;
    }
    .navbar form {
        right: -10px;
    }
    .navbar form,
    .navbar-toggle {
        margin-right: 10px;
    }
    /* lang position handled by .navbar-left-cluster on mobile */
    .logo {
        margin-left: 10px;
    }
    .navbar .logo img,
    .navbar.affix .logo img {
        margin: 0 0 0 10px !important;
        width: 50px;
        height: 55px;
        transform: none;
    }
    .navbar-collapse {
        float: none !important;
        margin: 0 !important;
        padding: 20px !important;
        width: 100% !important;
        background: rgba(255,255,255,0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
        border-radius: 0 0 4px 4px;
        overflow-x: hidden;
    }
    .navbar-nav > li ul {
        display: none;
    }
    .navbar-nav > li.active ul {
        display: block;
        margin: 0 0 0 15px;
        padding: 0 0 0 20px;
        border-left: 2px solid var(--ba-blue-500);
    }
    .navbar-nav > li.active ul li {
        list-style: none;
        padding: 5px 0;
    }
    .navbar-nav > li.active ul li a {
        font-weight: 300;
    }
    .navbar-nav > li.active ul li.active a {
        color: var(--ba-link);
    }
    .navbar form.search,
    .navbar.affix form.search {
        top: 14px;
        right: 140px;
    }
}
/* Mobile/tablet: calendar icon + flags as one flex group after logo */
@media (max-width: 991px) {
    .navbar-left-cluster {
        position: absolute;
        left: 80px;
        top: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .navbar-left-cluster .event-button,
    .navbar-left-cluster .lang {
        position: static;
        top: auto;
        left: auto;
        right: auto;
    }
}
@media (max-width: 767px) {
    .navbar {
        position: fixed;
    }
    .navbar .container,
    .navbar.affix .container{
        border-radius: 0 0 30px 30px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .navbar form {
        top: 14px;
        right: 140px;
        width: 165px;
    }
}
@media (max-width: 480px) {
    .navbar form {
        width: 105px;
    }
    .navbar form button {
        height: 32px;
        right: 5px;
        top: 1px;
        width: 34px;
    }
}
/* Scroll-aware navbar (mobile/tablet)
--------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .navbar {
        transition: transform 0.3s ease;
    }
    .navbar-scroll-hidden .navbar {
        transform: translateY(-100%);
    }
    /* Freeze container appearance in non-affix state on mobile */
    .navbar.affix .container {
        background: rgba(255,255,255,0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    /* Prevent affix margin from indenting mobile nav pills */
    .navbar.affix .mobile-mainnav .navbar-nav {
        margin-left: 0;
        margin-right: 0;
    }
}
/* Kopf beim Hochscrollen einzeilig (UX-Review S2): ab der Seitenmitte nur
   Logo und Symbole, die Pill-Reihe kommt erst am Seitenanfang zurueck.
   page.js setzt navbar-condensed zusammen mit navbar-scroll-hidden, also
   waehrend der Kopf aus dem Bild ist -- er springt nicht sichtbar.
   !important gegen Bootstraps .visible-xs/.visible-sm. */
@media (max-width: 991px) {
    body.navbar-condensed .mobile-mainnav-wrap {
        display: none !important;
    }
}
.mobile-subnav-wrap {
    transition: top 0.3s ease;
}
.navbar-scroll-hidden .mobile-subnav-wrap {
    top: 0;
}

/* Bootstrap Navigation Breakpoint override
--------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .l-start .l-content.start {
        margin-top: 0;
    }
    .navbar-header {
        float: none;
    }
    .navbar form, .navbar-toggle {
        margin-right: 0;
    }
    .navbar-toggle {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none!important;
    }
    .navbar-nav > li {
        float: none;
    }
    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* Navigation Sidebar
--------------------------------------------------------------------------------------------------------------------- */
.sidebar .nav {
    margin-bottom: 50px;
}
.sidebar .nav:empty {
    margin-bottom: 0;
}
.sidebar .nav ul {
    padding: 0;
}
.sidebar .nav li {
    list-style: none;
    border-bottom: 1px solid #d6d6d6;
}
.sidebar .nav li:last-child {
    border-bottom: 0;
}
.sidebar .nav li a {
    display: block;
    margin: 5px 0;
    padding: 5px 0;
}
.sidebar .nav li.active a {
    color: var(--ba-blue-600);
}
.sidebar .nav li a:hover {
    background: 0 none;
}
.sidebar .nav li a:hover,
.sidebar .nav li a:focus,
.sidebar .nav li a:active {
    color: var(--ba-blue-600);
    background: 0 none;
}

/* Footer
--------------------------------------------------------------------------------------------------------------------- */
.l-footer {
    position: relative;
    z-index: 1;
}
footer {
    position: relative;
    padding: 25px 0;
    height: 110px;
    background: var(--ba-blue-900);
    color: var(--ba-blue-300);
}
footer .nav {
    margin-bottom: 10px;
    text-align: right;
}
footer .nav li {
    display: inline-block;
}
footer .nav li a {
    /* Abstand statt Trennstrich: beim Umbruch hing der Strich am Zeilenende
       (UX-Review U26). */
    padding:0 15px;
    line-height: 14px;
    color: var(--ba-text-on-brand);
}
footer .nav li:last-child a {
    border: 0 none;
}
footer .nav li a:hover,
footer .nav li a:focus,
footer .nav li a:active {
    color: var(--ba-blue-300);
    background: 0 none;
}
footer p.text-right {
    margin-right: 15px;
}
footer .social input {
    display: inline-block;
    vertical-align: top;
    width: auto;
}
footer .social input[type="email"] {
    border-radius: 4px 0 0 4px;
    margin-right: -5px;
}
footer .social input[type="submit"] {
    padding: 7px 12px;
    border-radius: 0 4px 4px 0;
}
footer .social .newsletter {
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
    margin-right: 15px;
    padding-right: 15px;
    height: 34px;
}
footer .social a {
    margin-right: 5px;
}
footer .social img {
    width: 24px;
    height: auto;
    margin-top: -5px;
}
@media (max-width: 1199px) {
    footer {
        height: auto;
    }
    footer .social .newsletter {
        display: block;
        margin-bottom: 10px;
    }
}
@media (max-width: 991px) {
    footer .social .newsletter input {
        width: 50%;
    }
}
@media (max-width: 767px) {
    footer .social,
    footer .nav,
    footer p.text-right {
        width: 100%;
        text-align: center;
    }
    footer .social .newsletter {
        margin: 0 0 20px 0;
        padding: 0;
        height: auto;
    }
    footer .social .newsletter input {
        width: 100%;
        border-radius: 4px;
        margin: 0;
    }
    footer .nav {
        margin: 15px 0;
        padding: 15px 0;
        border-top: 1px solid var(--ba-blue-300);
    }
    footer .social a {
        margin: 10px;
    }
    footer .nav li {
        display: block;
        margin: 20px 0;
    }
    footer .nav li a {
        border: 0 none;
    }
}

/* Standard Components
--------------------------------------------------------------------------------------------------------------------- */
/* Text
------------------------------------ */
.sidebar .component-text img {
    width: 100%;
    height: auto;
}
/* Eingebettete iframes aus dem Editor tragen feste width/height-Attribute
   (YouTube 560x315, bis 752 px breit) und liefen auf Mobile rechts aus dem
   Bild -- html/body schneiden per overflow-x:clip ab, Titel und Play-Knopf
   fehlten. Videos behalten ihr Format (99 % der Embeds sind 16:9), alle
   anderen iframes werden nur auf die Spaltenbreite begrenzt. */
.component iframe {
    max-width: 100%;
}
.component iframe[src*="youtube.com/"],
.component iframe[src*="youtube-nocookie.com/"],
.component iframe[src*="vimeo.com/"],
.component iframe[src*="videos.mtb-news.de/"] {
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Suche
------------------------------------ */
.component-search .btn,
.component-fulltext-simple .btn{
    width: 100%;
}
.results.list-unstyled > li {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

/* Pagination
------------------------------------ */
.pager .btn {
    width: auto;
}
.pager .disabled .btn {
    border-color: var(--ba-border);
}
.pager li > a, .pager li > span {
    border: 0 none;
    border-radius: 4px;
}
.pager li span {
    padding: 5px 14px;
    border: 2px solid var(--ba-grey-200);
    color: var(--ba-text-subtle);
    font-size: 14px;
}
.pager i {
    font-style: normal;
}
@media (max-width: 480px) {
    .pager li {
        display: table-cell;
        vertical-align: middle;
        width: 1%;
    }
    .pager li span {
        font-size: 13px;
        padding: 5px;
    }
    .pager i {
        display: none;
    }
}


/* Standard Gallery
------------------------------------ */
.flexslider .slides img {
    height: auto;
}
.flex-caption {
    padding: 9px;
    color: var(--ba-grey-500);
    font-size: 14px;
}
.flex-direction-nav a {
    top: 50% !important;
}

/* Downloads
------------------------------------ */
.component-common-download-preview img {
    width: 100px;
    height: auto;
    margin: 0 15px 20px 0;
}

/* Address
------------------------------------ */
.map-badge {
    border-radius: 5px;
}
.map-badge.thumbnail.show {
    height: 250px;
    border-radius: 5px;
}

/* Contact-Person
------------------------------------ */
.sidebar .component-contact .thumbnail {
    margin: 8px 0;
}

/* Jumbotron
--------------------------------------------------------------------------------------------------------------------- */
.component-jumbotron,
.component-jumbotron .image {
    /*padding: 0 0 35%;*/
    height: 545px;
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.component-jumbotron {
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* #11 — Ambient Mesh Gradient Fallback (shows when no hero image is set) */
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(71, 137, 190, 0.9) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(106, 168, 212, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse at 60% 80%, rgba(10, 58, 92, 0.85) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 10%, rgba(29, 92, 142, 0.75) 0%, transparent 45%);
    background-color: #0e4272;
    background-size: 250% 250%, 250% 250%, 250% 250%, 250% 250%;
    background-position: 0% 50%, 100% 0%, 50% 100%, 0% 0%;
}
/* Der Gradient ist nur der Fallback: liegt ein Hero-Bild an, deckt .image ihn
   vollflaechig ab (position: fixed, background-size: cover). Die Animation lief
   trotzdem endlos weiter und hat background-position auf einem 545 px hohen
   Vollbreiten-Element neu gemalt — unsichtbar, nicht GPU-kompositierbar, und
   die Seite kam nie zur Ruhe (WebPageTest visualComplete 4200 ms bei
   fullyLoaded 1249 ms). Deshalb nur noch dort, wo man sie sieht. */
.component-jumbotron:not(.has-hero) {
    animation: heroMeshShift 14s ease infinite;
}
@keyframes heroMeshShift {
    0%   { background-position: 0% 50%,   100% 0%,   50% 100%, 0% 0%; }
    25%  { background-position: 50% 0%,   0% 100%,  100% 50%, 100% 100%; }
    50%  { background-position: 100% 50%, 50% 0%,    0% 0%,   50% 50%; }
    75%  { background-position: 50% 100%, 100% 50%, 50% 0%,    0% 100%; }
    100% { background-position: 0% 50%,   100% 0%,  50% 100%, 0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
    /* Selektor muss die Spezifitaet von .component-jumbotron:not(.has-hero) erreichen,
       sonst gewinnt die Animation gegen den Abschalter. */
    .component-jumbotron:not(.has-hero) { animation: none; }
}
.l-start .component-jumbotron {
    margin: -160px 0 0;
}
.component-jumbotron .image {
    position: fixed;
    width: 100%;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}
/* Das Hero-Bild ist jetzt ein <img> statt eines CSS-Hintergrunds (srcset,
   fetchpriority, Auffindbarkeit im HTML). object-fit bildet background-size:
   cover / background-position: center nach. Descendant-Selektor, nicht ">",
   weil render_attachment das Bild in einen <a> packt, wenn am Attachment ein
   Link haengt. */
.component-jumbotron .image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
img.rounding {
    position: absolute;
    width: 110%;
    bottom: -1px;
    left: -5%;
    right: 0;
}
@media (max-width: 991px) {
    .component-jumbotron,
    .component-jumbotron .image {
        height: 450px;
    }
}
@media (max-width: 767px) {
    .component-jumbotron,
    .component-jumbotron .image {
        height: 380px;
    }
}

/* Jumbotron for pages with small header e.g. article-detail (fultext_small_header.tpl)
--------------------------------------------------------------------------------------------------------------------- */
.small-header,
.big-header {
    position: relative;
    min-height: 240px;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(71, 137, 190, 0.9) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(106, 168, 212, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse at 60% 80%, rgba(10, 58, 92, 0.85) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 10%, rgba(29, 92, 142, 0.75) 0%, transparent 45%);
    background-color: #0e4272;
    background-size: 250% 250%, 250% 250%, 250% 250%, 250% 250%;
    background-position: 0% 50%, 100% 0%, 50% 100%, 0% 0%;
    animation: heroMeshShift 14s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
    .small-header, .big-header { animation: none; }
}
.small-header .component-jumbotron,
.small-header .component-jumbotron .image {
    height: 260px;
}
@media (max-width: 991px) {
    .small-header .component-jumbotron,
    .small-header .component-jumbotron .image  {
        height: 200px;
    }
}
@media (max-width: 767px) {
    .small-header .component-jumbotron,
    .small-header .component-jumbotron .image  {
        height: 230px;
    }
}

/* Ken Burns auf den Titelbildern des Pro-Team-Bereichs (Klasse aus fulltext.tpl,
   Entscheid PW 2026-09-26): ein sehr leiser Zoom-out, einmal pro Aufruf, dann
   steht das Bild. 1,06 statt 1,12 wie auf der Startseite, weil der Hero hier bis
   3,5:1 breit ist und jede Bewegung staerker wirkt. Ease-out statt ease-in-out:
   das Bild bewegt sich sofort und laeuft weich aus, ohne toten Anfang. Die
   2200-px-Variante aus dem srcset traegt die 6 % auch auf 1920 px Breite.
   will-change legt das Bild auf eine eigene Ebene, sonst ruckelt ein so
   langsamer Zoom in Safari in Pixelschritten. */
.big-header.has-kenburns .component-jumbotron.has-hero .image img {
    transform-origin: 50% 50%;
    animation: hero-kenburns-out 22s cubic-bezier(0.33, 0, 0.2, 1) both;
    will-change: transform;
}
@keyframes hero-kenburns-out {
    from {transform: scale(1.06);}
    to   {transform: scale(1);}
}
@media (prefers-reduced-motion: reduce) {
    .big-header.has-kenburns .component-jumbotron.has-hero .image img {
        animation: none;
    }
}

/* Kopf je Seitentyp (Helper_Page_Header, UX-Review U6/S1, 2026-10-17)
   ------------------------------------------------------------------------------------------------------------------
   is-full     Einstiegsseiten: Hoehen wie oben. Mobil zusaetzlich gedeckelt, damit unter dem Bild Platz fuer den
               Titel bleibt, auch auf kleinen Telefonen. svh (kleinste Viewport-Hoehe, Safaris Leisten
               ausgeklappt) statt vh: mit vh rechnet Safari die Flaeche hinter seiner Adressleiste mit, und genau
               dort lagen auf iOS 26 die Knoepfe. Darunter bleibt Platz fuer env(safe-area-inset-bottom) plus Leiste.
   is-compact  Detailseiten (Veranstaltung, GPS-Strecke): dasselbe Bild, niedriger, Titel und Hauptaktion im
               ersten Bildschirm. Der niedrigere Ausschnitt schneidet mehr vom Motiv ab (object-fit: cover, Mitte).
   is-plain    Kein Kopfbild, Kontoseiten: nur Navigationshoehe plus Rundung, statt bis zu 545 px blauer Flaeche.
               Mobil liegt die Navigation fix darueber, page.js schreibt ihre Hoehe in --navbar-height.
   Die Werte gelten fuer Bild und Huelle gemeinsam: .image ist position: fixed und braucht die Hoehe selbst. */
@media (max-width: 767px) {
    .big-header.is-full .component-jumbotron,
    .big-header.is-full .component-jumbotron .image {
        height: min(380px, calc(100vh - 200px - env(safe-area-inset-bottom, 0px)));
        height: min(380px, calc(100svh - 200px - env(safe-area-inset-bottom, 0px)));
    }
}
.big-header.is-compact .component-jumbotron,
.big-header.is-compact .component-jumbotron .image {
    height: 360px;
}
@media (max-width: 991px) {
    .big-header.is-compact .component-jumbotron,
    .big-header.is-compact .component-jumbotron .image {
        height: 300px;
    }
}
@media (max-width: 767px) {
    .big-header.is-compact .component-jumbotron,
    .big-header.is-compact .component-jumbotron .image {
        height: clamp(180px, calc(100vh - 420px - env(safe-area-inset-bottom, 0px)), 240px);
        height: clamp(180px, calc(100svh - 420px - env(safe-area-inset-bottom, 0px)), 240px);
    }
}
.big-header.is-plain,
.small-header.is-plain {
    min-height: 0;
    height: 200px;
}
@media (max-width: 991px) {
    .big-header.is-plain,
    .small-header.is-plain {
        height: calc(var(--navbar-height, 118px) + 24px);
    }
}


/* New Biker Welcome
--------------------------------------------------------------------------------------------------------------------- */
.component-welcome {
    position: relative;
    z-index: 1;
    margin: -575px 0 0;
    padding: 0;
    height: 940px;
    width:100%;
    background: var(--ba-blue-500);
    color: var(--ba-text-on-brand);
}
/* Hero-Ebene unter .mask (z-index -1) und Inhalt. Eigene Ebene statt
   Hintergrund der Komponente, damit sich das Bild per transform bewegen
   laesst, ohne den Text mitzunehmen. overflow nur hier, nicht an
   .component-welcome: img.rounding ragt dort absichtlich seitlich hinaus.
   Das Bild wird in header.tpl vorgeladen (gleiche URLs pflegen). */
.component-welcome .welcome-media {
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* Scrim hinter dem Text: das Foto ist links unruhig (Publikum, Feld), die
   Liste darueber war mit .mask allein kaum lesbar. Verlauf von links, das
   Feld in der Kurve rechts bleibt hell. #00386a = --ba-blue-900. */
.component-welcome .welcome-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 56, 106, 0.72) 0%, rgba(0, 56, 106, 0.55) 38%, rgba(0, 56, 106, 0.12) 68%, rgba(0, 56, 106, 0) 85%);
}
.component-welcome .welcome-still,
.component-welcome .welcome-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.component-welcome .welcome-still {
    background: url("/media/images/default/hero-rwanda-2025-1920.jpg") no-repeat center center;
    background-image: image-set(url("/media/images/default/hero-rwanda-2025-1920.avif") type("image/avif"), url("/media/images/default/hero-rwanda-2025-1920.jpg") type("image/jpeg"));
    background-size: cover;
    /* Ken Burns (ohne Video: Mobile, Tablet, Save-Data): einmal in 20 s vom
       Feld in der Kurve zurueck in die volle Ansicht, dann Stillstand. Gleiche
       Dramaturgie wie das Desktop-Video, das auch in der Totalen endet
       (Entscheid PW 2026-09-26: nur einmal, kein Hin und Her). */
    transform-origin: 62% 58%;
    animation: welcome-kenburns 20s ease-in-out 1 both;
}
.component-welcome .welcome-video {
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}
.component-welcome .welcome-media.is-playing .welcome-video {
    opacity: 1;
}
/* Mit Video steht das Foto still (Skript setzt has-video, bevor es laedt):
   das erste Videobild ist das unbewegte Foto, die Ueberblendung springt so nicht. */
.component-welcome .welcome-media.has-video .welcome-still {
    animation: none;
}
/* Desktop mit Video: zuerst das erste Videobild (eingezoomt aufs Feld) als
   Standbild, das Video laeuft nahtlos darauf an und endet in der Totalen.
   Gleiche Bedingungen wie das Skript im Template; Save-Data faengt das Skript
   ab (Klasse weg = Totale). Datei = Bild 0 aus scripts/hero-video/run.sh,
   bei neuer Videofassung mittauschen, ebenso den Preload in header.tpl. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .component-welcome .welcome-media.video-poster .welcome-still {
        background-image: url("/media/images/default/hero-rwanda-2025-v3-poster.jpg");
        background-image: image-set(url("/media/images/default/hero-rwanda-2025-v3-poster.avif") type("image/avif"), url("/media/images/default/hero-rwanda-2025-v3-poster.jpg") type("image/jpeg"));
        animation: none;
    }
}
@keyframes welcome-kenburns {
    from {transform: scale(1.12) translate(-1%, -1.5%);}
    to   {transform: scale(1);}
}
@media (prefers-reduced-motion: reduce) {
    .component-welcome .welcome-still {
        animation: none;
    }
}
@media (max-width: 991px) {
    /* Text laeuft hier ueber die volle Breite: gleichmaessig abdunkeln,
       nach unten staerker, wo die Liste steht. */
    .component-welcome .welcome-media::after {
        background: linear-gradient(180deg, rgba(0, 56, 106, 0.15) 0%, rgba(0, 56, 106, 0.45) 35%, rgba(0, 56, 106, 0.6) 100%);
    }
}
@media (max-width: 767px) {
    /* Mobile-Ausschnitt: 760 x 2001 px ab x = 1850 aus dem Original (Strasse
       bergauf mit Fahrern, Feld, klatschende Haende). Bis 2026-09-26 ab x = 780,
       dort lag der Text nur auf dem Ruecken des Finisher-Fans. Ken Burns
       zoomt von den Fahrern oben aus heraus. */
    .component-welcome .welcome-still {
        background-image: url("/media/images/default/hero-rwanda-2025-mobile.jpg");
        background-image: image-set(url("/media/images/default/hero-rwanda-2025-mobile.avif") type("image/avif"), url("/media/images/default/hero-rwanda-2025-mobile.jpg") type("image/jpeg"));
        transform-origin: 65% 35%;
    }
}
.component-welcome .content {
    position: relative;
    margin: 200px 0 15px;
    padding-bottom: 50px;
    width: 60%;
    border: 0 none;
    background: rgba(255,255,255,0);
    text-shadow: 0 1px 1px rgba(0,0,0,0.7);
}
.component-welcome .scroll {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 125px;
    width: 57px;
    height: 24px;
    background: url("/media/images/default/arrow-down.png") no-repeat center center;
    transition: all 300ms ease-in-out;
}
.component-welcome .scroll.affix {
    opacity: 0;
    transform: translateY(50px);
}
.component-welcome h1 {
    margin-top: 0;
    font-size: var(--ba-text-hero);
    /* Keine Silbentrennung in der Hero-Zeile ("WIRK-LICH" wirkte ungestaltet),
       stattdessen gleich lange Zeilen. Die globale h1-Regel trennt sonst. */
    -webkit-hyphens: manual;
    hyphens: manual;
    text-wrap: balance;
}
/* Einblenden: kurzer Fade-up, leicht gestaffelt, nach ~0,8 s ist alles da.
   Bis 2026-09 flog der Text ueber 3,8 s mit 3-facher Skalierung herein.
   Nur hier im Hero, keine weiteren Einblendungen dazubauen (Template-Look). */
.component-welcome h1,
.component-welcome p,
.component-welcome h3,
.component-welcome ul,
.component-welcome a.btn {
    animation: welcome-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.component-welcome p { animation-delay: 80ms; }
.component-welcome h3,
.component-welcome ul { animation-delay: 160ms; }
.component-welcome a.btn { animation-delay: 240ms; }
.component-welcome a.btn {
    display: inline-block;
    width: auto;
}
/* Bei "Bewegung reduzieren" stehen die Elemente sofort im Endzustand. */
@media (prefers-reduced-motion: reduce) {
    .component-welcome h1,
    .component-welcome p,
    .component-welcome h3,
    .component-welcome ul,
    .component-welcome a.btn {
        animation: none;
    }
}
@keyframes welcome-rise {
    from {opacity: 0; transform: translateY(12px);}
    to   {opacity: 1; transform: none;}
}
.component-welcome .mask {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background: var(--ba-blue-900);
    opacity: 0.2;
}
.component-welcome li {
    display: inline-block;
    position: relative;
    vertical-align: top;
    padding: 0 0 10px 30px;
    width: 100%;
}
.component-welcome li img {
    position: absolute;
    margin: 0 5px 5px 0;
    left: 0;
    width: 20px;
}
.component-welcome .content .btn-primary {
    position: relative;
    margin-right: 15px;
    bottom: 0;
    left: 0;
    font-weight: 400;
    width: auto;
}
/* Zweiter Button gleich gross wie der rote, aber als Umriss: ein System statt
   zwei (bis 2026-09 kleines blaues Feld neben dem grossen roten Button).
   Hoehe: 2 px Rand + 8 px Innenabstand = 10 px wie beim roten. */
.component-welcome .content .btn-secondary {
    padding: 8px 28px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    color: var(--ba-text-on-brand);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.component-welcome .content .btn-secondary:hover,
.component-welcome .content .btn-secondary:focus-visible {
    border-color: #fff;
    background: #fff;
    color: var(--ba-blue-900);
    text-shadow: none;
}
/* Pause-Knopf fuers Hero-Video, unten rechts ueber der Welle */
.component-welcome .welcome-pause {
    position: absolute;
    z-index: 2;
    right: 32px;
    bottom: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 30, 60, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.component-welcome .welcome-pause[hidden] {
    display: none;
}
.component-welcome .welcome-pause:hover {
    background: rgba(0, 30, 60, 0.75);
}
.component-welcome .welcome-pause:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.component-welcome .welcome-pause svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.component-welcome .welcome-pause .icon-play,
.component-welcome .welcome-pause.is-paused .icon-pause {
    display: none;
}
.component-welcome .welcome-pause.is-paused .icon-play {
    display: block;
}
@media (max-width: 1199px) {
    .component-welcome .scroll {
        display: none;
    }
}
@media (max-width: 991px) {
    .component-welcome {
        padding: 0;
    }
    .component-welcome .content {
        margin: 290px 0;
        width: 100%;
    }
}
@media (max-width: 767px) {
    .component-welcome {
        height: auto;
    }
    /* Drei Zeilen statt fuenf: "EIN BIKE KANN / WIRKLICH VIEL / BEWEGEN".
       Die Spalte ist Viewport minus 68 px Polster, "WIRKLICH VIEL" braucht in
       Roboto Slab 300 etwa das 7,4-fache der Schriftgroesse (gemessen
       2026-09-26). Andere Headline im CMS = neu messen. */
    .component-welcome h1 {
        font-size: min(calc((100vw - 68px) / 7.6), 56px);
    }
    /* Abstand oben: .component-welcome sitzt per -575px unter dem (hier
       unsichtbaren) Jumbotron, 210 + 120 px setzen die Headline rund 40 px
       unter die Navigation. Bis 2026-09-29 waren es 220 px Polster aus 2015,
       das liess ~140 px leeres Bild ueber der Headline stehen. */
    .component-welcome .content {
        margin: 210px 0 50px;
        padding-top: 120px;
    }
}
@media (max-width: 500px) {
    .component-welcome a.btn {
        width: 100% !important;
        margin-bottom: 15px;
        white-space: normal;
    }
}

/* Article Component
--------------------------------------------------------------------------------------------------------------------- */
/* ===================================================================
   Archiv: Jahres-Filter (2026-08-29)
   Dropdown ueber der Artikelliste, siehe
   views/frontend/component/article/multi/archive.tpl
   =================================================================== */
.component-article-archive .archive-year-filter {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ba-border);
}
.component-article-archive .archive-year-filter label {
    margin-right: 8px;
    margin-bottom: 0;
    font-weight: normal;
    color: var(--ba-text-muted);
}
.component-article-archive .archive-year-filter select {
    display: inline-block;
    width: auto;
    min-width: 140px;
}
.component-article-archive .archive-year-filter-noscript {
    margin-bottom: 24px;
    line-height: 2;
}

/* Article Teasers (Startpage)
------------------------------------ */
.component-article-archive .highlight small {
    display: block;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ba-grey-200);
}
.component-article-archive .articles {
    position: relative;
    margin-bottom: 20px;
    height: 360px;
}
.component-article-archive .item {
    position: relative;
    margin-bottom: 30px;
    padding: 0 10px;
}
.component-article-archive .item .flag {
    position: absolute;
    z-index: 1;
    top: 242px;
    left: 10px;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
.component-article-archive .teaser-image {
    position: relative;
    height: 250px;
    border-radius: 4px;
    background-size: cover;
    background-position: center center;
    background-color: var(--ba-grey-50);
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
.component-article-archive .image {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}
.component-article-archive .item h2 {
    position: relative;
    z-index: 0;
    height: 80px;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    top: -15px;
    border-radius: 0 0 4px 4px;
    background: #ecf3f9;
    line-height: 28px;
}
.component-article-archive .item h2 a {
    font-size: 20px;
    color: var(--ba-blue-900);
}
.component-article-archive .item h2 img {
    position: absolute;
    right: 0;
    bottom: 0;
}
.component-article-archive .item:hover .teaser-image {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}
.component-article-archive .item a small {
    position: absolute;
    padding: 3px 5px;
    border-radius: 0 4px 0 0;
    bottom: 0;
    left: 0;
    background: var(--ba-blue-500);
    color: var(--ba-text-on-brand);
}
.component-article-archive .teaser {
    display: none;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .component-article-archive .teaser-image {
        height: 200px;
    }
    .component-article-archive .item .flag {
        top: 192px;
    }
}
@media (max-width: 991px) {
    .component-article-archive .highlight img {
        width: 100%;
        height: auto;
    }
}
@media (max-width: 767px) {
    .component-article-archive .highlight a {
        display: block;
        position: relative;
    }
    .component-article-archive .highlight img {
        border-radius: 5px 5px 0 0;
        border-bottom: 4px solid var(--ba-blue-500);
    }
    .component-article-archive .highlight .flag {
        width: 20px;
        height: 20px;
    }
    .component-article-archive .highlight .flag img {
        margin: -13px 0 0 0;
        border: 0 none;
    }
}

/* Article Teaser Subpage
------------------------------------*/
@media (min-width: 992px) {
    .l-sub .component-article-archive .col-md-4 {
        width: 50%;
    }
}
.l-sub .component-article-archive .teaser {
    display: none;
}
.l-sub .component-article-archive .teaser-image {
    height: 200px;
    width: 100%;
}
.l-sub .component-article-archive .item .flag {
    top: 192px;
}

/* Spotify-style Mobile Article Layout (Homepage xs/sm only)
--------------------------------------------------------------------------------------------------------------------- */
.l-start .spotify-layout {
}
.l-start .spotify-section {
    margin-bottom: 28px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ebebeb;
}
.l-start .spotify-section:last-child {
    border-bottom: none;
}
.l-start .spotify-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 0 8px;
}
.l-start .spotify-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ba-blue-900);
}
.l-start .spotify-section-more {
    font-size: 13px;
    color: var(--ba-blue-500);
    white-space: nowrap;
    flex-shrink: 0;
}
.l-start .spotify-row {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0 0 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
}
.l-start .spotify-row.scrolled-end {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 48px);
    mask-image: linear-gradient(to right, transparent 0%, black 48px);
}
.l-start .spotify-row.no-overflow {
    -webkit-mask-image: none;
    mask-image: none;
}
.l-start .spotify-row::-webkit-scrollbar {
    display: none;
}
/* Scrollleiste nur am Zeigergeraet (2026-08-29).
   Zieht jemand ein Desktop-Fenster auf Mobilbreite, greift das
   Spotify-Layout -- dort sahen die Reihen ohne sichtbare Leiste
   abgeschnitten aus, weil macOS Overlay-Scrollbars benutzt und der
   Mask-Fade allein als Hinweis nicht reicht. Optik wie beim
   "Live on the road"-Karussell (.social-strip--sidewinder).
   Am echten Touchgeraet bleibt es ohne Leiste: dort ist Wischen die
   erwartete Geste, und hover/pointer trennt das zuverlaessiger als
   eine Breitenabfrage -- ein schmales Desktop-Fenster und ein Handy
   sind gleich breit, aber nicht gleich bedienbar. */
@media (hover: hover) and (pointer: fine) {
    .l-start .spotify-row {
        scrollbar-width: thin;
        scrollbar-color: var(--ba-grey-300) transparent;
    }
    .l-start .spotify-row::-webkit-scrollbar {
        display: block;
        height: 6px;
    }
    .l-start .spotify-row::-webkit-scrollbar-thumb {
        background: var(--ba-grey-300);
        border-radius: 3px;
    }
}
.l-start .spotify-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(50% - 21px);
    max-width: calc(50% - 21px);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}
.l-start .spotify-card:hover,
.l-start .spotify-card:focus {
    text-decoration: none;
    color: inherit;
    opacity: 0.85;
}
.l-start .spotify-card-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    background-color: var(--ba-grey-100);
    margin-bottom: 8px;
    overflow: hidden;
}
.l-start .spotify-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.l-start .spotify-card-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.l-start .spotify-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ba-blue-900);
    line-height: 1.35;
    padding: 0 2px;
}
.l-start .spotify-card-date {
    font-size: 11px;
    color: var(--ba-grey-500);
    padding: 3px 2px 0;
}

/* Article Archive
------------------------------------ */
.component-article-archive h2,
.component-standard-article-archive h2 {
    margin-top: 0;
}
/* Der Highlight-Titel war bis 2026-10-17 eine h1 und hatte Bootstraps Abstand
   nach oben; als h2 (UX-Review U20) faellt er sonst unter die Regel darueber. */
.component-article-archive .highlight h2.as-h1 {
    margin-top: 20px;
}
.component-article-archive .item,
.component-standard-article-archive .item {
    margin-bottom: 50px;
}
@media (max-width: 480px) {
    .component-article-archive .item img,
    .component-standard-article-archive .item img {
        margin-bottom: 15px;
    }
    .component-standard-article-archive a {
        display: block;
        position: relative;
    }
    .component-standard-article-archive a img {
        border-bottom: 4px solid var(--ba-blue-500);
        border-radius: 5px 5px 0 0;
    }
    .component-standard-article-archive a .flag {
        position: absolute;
        left: -2.5px;
        bottom: -30px;
    }
    .component-standard-article-archive a .flag img {
        border: 0 none;
    }
}

/* Article Detail
------------------------------------ */
.component-article-show h1 {
    display: block;
    margin: 0 0 35px;
    padding-bottom: 30px;
    border-bottom: 4px double var(--ba-grey-200);
    font-size: 35px;
}
.component-article-show .image-container {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 40px;
    height: 370px;
    border-radius: 4px;
}
.component-article-show .image-container img {
    width: 100%;
    height: auto;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
.component-article-show .image-container img:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}
.component-article-show .gallery-container .btn {
    display: block;
    position: relative;
    z-index: 1;
    margin: -55px auto 40px;
    max-width: 220px;
}
@media (max-width: 767px) {
    .component-article-show .image-container {
        height: auto;
    }
}

/* Account
--------------------------------------------------------------------------------------------------------------------- */
/* Forms
------------------------------------ */
.component-form .form-group {
    display: inline-block;
    position: relative;
    width: 49%;
    vertical-align: top;
}
/* Die Breiten-Regeln oben und Bootstraps .help-block schlagen sonst das
   hidden-Attribut (Zusatzpakete: Felder und Hinweise je nach Paket). */
.component-form .form-group[hidden],
.component-form .help-block[hidden] {
    display: none;
}
/* Zusatzpakete: Ruecksprung als Textlink neben dem Absenden-Button, wie
   .ps-savebar-back in den Profileinstellungen. */
.component-biker-member-package-request .submit-back {
    display: inline-block;
    margin-left: 15px;
    font-size: var(--ba-text-sm);
}
/* Enddatum einer Abbestellung an der Stelle der Saison-Auswahl: gleiche
   Schrift wie die Radio-Beschriftungen daneben. */
.component-biker-member-package-request .cancel-until {
    margin: 0 0 5px;
}
@media (max-width: 767px) {
    .component-biker-member-package-request .submit-back {
        display: block;
        margin: 12px 0 0;
    }
}
.btn-info {
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 20px;
}
.sidebar .form-group {
    width: 100%;
}
.component-form .form-group .control-group {
    width: 100%;
}
.submit-area .control-group {
    width: 100%;
}
.component-form .membership .control-group {
    width: 100%;
}
.formo-radios.control-group {
    width: 100%;
}
label.radio {
    margin-left: 20px;
}
.form-group .wide {
    width: 66%;
    display: inline-block;
}
.form-group .small {
    display: inline-block;
    width: 30%;
}

/* Password forgotten
------------------------------------ */
.component-account-password-forgotten .btn {
    margin-top: 30px;
}

/* Overview
------------------------------------ */
.component-account-overview dt {
    width: 250px;
    text-align: left;
}
/* Bis 2026-09 volle Breite + globale Hero-CTA-Optik (.btn-primary: 60px
   Seitenpolster, 18px, Grossschrift, Schatten) -- passend fuer eine
   Marketing-Flaeche wie "Mitglied werden", neben "E-Mail-Adresse ändern"
   und "Passwort ändern" aber ein Fremdkoerper. Auf Buttongroesse der
   Nachbarn zurueckgestutzt, Rot bleibt als Hervorhebung. */
.component-account-overview .btn-primary {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    box-shadow: none;
}
.component-account-overview .guest .btn {
    padding: 10px;
    width: 100%;
    font-size: 14px;
}
.component-account-overview .formo-checkbox {
    position: relative;
}
.component-account-overview .formo-checkbox label {
    padding-left: 25px;
}
.component-account-overview .formo-checkbox input {
    position: absolute;
    top: 3px;
    left: 0;
}
@media (max-width: 767px) {
    .component-account-overview .btn {
        margin: 5px 0;
    }
}

/* Profile Settings
------------------------------------ */
.component-profile-settings .formo-checkbox,
.component-profile-settings .control-group.checkbox {
    width: 100%;
}
.component-profile-settings .checkbox label {
    padding-left: 25px;
    text-align: left;
}
.component-profile-settings .btn-delete-image {
    margin-right: 15px;
}
.component-profile-settings input[type="checkbox"] {
    margin: 0;
    top: 5px;
}
.component-profile-settings .btn-info {
    position: absolute;
    padding: 2px 8px;
    top: -4px;
    right: 0;
    color: var(--ba-blue-500);
    background: var(--ba-white);
    border: 2px solid var(--ba-blue-500);
    font-weight: bold;
}
.component-profile-settings .textarea {
    width: 100%;
}
.well-filedrop {
    border: 2px solid #c7dbeb;
    background: #ecf3f8;
}
.well-filedrop .alert-danger {
    margin-bottom: 0;
}
.well-filedrop .table {
    margin-bottom: 0;
}
.well-filedrop .table tr {
    margin-top: 15px;
}

/* Dropzone-Zustaende (2026-07-27)
   Vorher gab es im Frontend keine einzige .dz-*-Regel. Dropzone setzte seine
   Klassen korrekt, nur sah man davon nichts: kein Hover beim Ziehen, keine
   Vorschau, keine Fehlermeldung. Der Upload lief -- unsichtbar. */
.well-filedrop {
    transition: border-color var(--ba-transition-fast), background var(--ba-transition-fast);
}
.well-filedrop.dz-drag-hover {
    border-color: var(--ba-blue-600);
    border-style: dashed;
    background: var(--ba-surface-tint);
}
.well-filedrop .dz-message {
    margin: 0 0 var(--ba-space-md);
    text-align: center;
    font-weight: var(--ba-weight-bold);
    color: var(--ba-text-strong);
}
.well-filedrop.dz-drag-hover .dz-message {
    color: var(--ba-blue-600);
}
.dz-clickable {
    cursor: pointer;
}

/* Der Preview-Container ersetzt die Klasse `hide`, die vorher fest im Template
   stand und die Vorschau dauerhaft ausblendete. Ohne Vorschau ist er 0 hoch --
   der Abstand haengt deshalb an .dz-preview und nicht am Container, sonst bliebe
   auf jeder Seite eine 16px-Luecke stehen. (`#previews:empty` waere wirkungslos:
   der Container enthaelt Whitespace-Textknoten und matcht :empty nie.) */
.well-filedrop .dz-preview {
    margin-top: var(--ba-space-md);
    padding: var(--ba-space-sm) 0;
    border-top: 1px solid var(--ba-border);
}
.well-filedrop .dz-preview:first-child {
    border-top: 0;
    margin-top: var(--ba-space-md);
}
.well-filedrop .dz-preview [data-dz-thumbnail] {
    max-width: 100%;
    height: auto;
}
.well-filedrop .dz-preview .progress {
    margin-bottom: 0;
}
/* Fehlertext nur zeigen, wenn Dropzone auch einen Fehler gemeldet hat --
   sonst steht ein leeres <strong> im Layout und reisst Abstand auf. */
.well-filedrop .dz-preview [data-dz-errormessage] {
    display: none;
}
.well-filedrop .dz-preview.dz-error [data-dz-errormessage] {
    display: block;
    margin-top: var(--ba-space-xs);
    color: var(--ba-error-text);
}
.well-filedrop .dz-preview.dz-error .progress {
    display: none;
}
.well-filedrop .dz-preview.dz-success .progress-bar {
    background-color: var(--ba-green-600);
}

.component-profile-settings .body-height {
    width: 25%;
}
.component-profile-settings .body-weight {
    width: 24%;
}

/* Member Application finish
------------------------------------ */
.component-member-application-finish li {
    position: relative;
    padding-lefT: 40px;
    margin-bottom: 30px;
}
.component-member-application-finish li span {
    background: var(--ba-blue-500);
    color: var(--ba-text-on-brand);
    border-radius: 50%;
    top: -3px;
    left: 0;
    padding: 2px 10px;
    position: absolute;
}

/* Biker
--------------------------------------------------------------------------------------------------------------------- */
/* List
------------------------------------ */
.component-biker-list .item {
    margin-bottom: 50px;
    height: 200px;
}
.component-biker-list .item .thumbnail {
    margin-right: 20px;
}

/* Detail
------------------------------------ */
.component-biker-detail .biker-images img {
    width: 100%;
    height: auto;
}
.component-biker-detail .profile-pic .thumbnail {
    margin: 0 0 20px 20px;
}

/* Registration
------------------------------------ */
.component-biker-registration .formo-checkbox .control-label {
    padding-left: 20px;
}
/* Ersetzt die Zwischenueberschrift „Newsletter" und zwei <br />. */
.component-biker-registration .submit-area {
    margin-top: 16px;
}
/* Datenschutz-Hinweis unter dem Formular (Snippet „Text Registrierung",
   Migration 20261004130000): kurz fuers Gastkonto, ausfuehrlich fuer den
   Mitgliedsantrag, je nach Auswahl im Formular. Ohne :has() beide sichtbar. */
.l-content:has(input.js-membership[value="new_member"]:checked) .privacy-guest,
.l-content:has(input.js-membership[value="no_member"]:checked) .privacy-member {
    display: none;
}

/* Auswahl Gastkonto / Mitgliedschaft (formo/frontend/plan_choice.tpl, Entwurf C
   2026-10-04): zwei Schalter mit Preiszeile, darunter die Vorteile der gewaehlten
   Option. Gewaehlter Schalter blau gefuellt mit goldenem Punkt, Form wie der
   Login-Knopf (4px 20px 20px 4px). Nur Tokens, Dark Mode kommt aus tokens.css.
------------------------------------ */
.component-biker-registration .lead {
    margin-bottom: 24px;
}
.plan-choice {
    border: 0;
    margin: 0 0 32px;
    padding: 0;
    min-width: 0;
}
.plan-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.plan-tile {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 2px 14px;
    margin: 0;
    padding: 16px 18px;
    font-weight: 400;
    cursor: pointer;
    background: var(--ba-surface);
    border: 2px solid var(--ba-border);
    border-radius: 4px 20px 20px 4px;
    transition: background-color var(--ba-transition-fast), border-color var(--ba-transition-fast);
}
.plan-tile:hover {
    border-color: var(--ba-blue-500);
}
/* Das Radio bleibt im Fokus- und Tab-Verlauf, nur unsichtbar; den Fokus zeigt
   die Kachel mit dem ueblichen goldenen Ring. */
.plan-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.plan-tile:has(input:focus-visible) {
    outline: 3px solid var(--ba-focus-ring);
    outline-offset: 3px;
}
.plan-ring {
    grid-row: span 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ba-border-strong);
    display: grid;
    place-items: center;
}
.plan-ring::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ba-gold-500);
    transform: scale(0);
    transition: transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.plan-name {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.2;
    color: var(--ba-text-strong);
}
.plan-price {
    font-size: 14px;
    line-height: 1.35;
    color: var(--ba-text-label);
}
.plan-tile:has(input:checked) {
    background: var(--ba-blue-600);
    border-color: var(--ba-blue-600);
}
.plan-tile:has(input:checked) .plan-name,
.plan-tile:has(input:checked) .plan-price {
    color: var(--ba-text-on-brand);
}
.plan-tile:has(input:checked) .plan-ring {
    border-color: var(--ba-text-on-brand);
}
.plan-tile:has(input:checked) .plan-ring::after {
    transform: scale(1);
}
.plan-benefits {
    background: var(--ba-surface-tint);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius);
    padding: 22px 24px;
}
.plan-benefits-list + .plan-benefits-list {
    margin-top: 24px;
}
.plan-benefits h2 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 400;
    margin: 0 0 14px;
    color: var(--ba-text-strong);
}
.plan-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.plan-checks li {
    position: relative;
    padding-left: 34px;
    font-size: 15px;
    line-height: 1.45;
}
/* Haken bzw. Plus als Maske, damit die Farbe aus dem Token kommt. */
.plan-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: var(--ba-success-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan-checks li.plan-checks-plus {
    color: var(--ba-text-label);
}
.plan-checks li.plan-checks-plus::before {
    background: var(--ba-text-label);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.plan-note {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ba-text-label);
}
/* Nur die Liste der gewaehlten Option. Ohne :has() bleiben beide stehen. */
@supports selector(:has(*)) {
    .plan-choice:has(input[value="new_member"]:checked) .plan-benefits-guest,
    .plan-choice:has(input[value="no_member"]:checked) .plan-benefits-member {
        display: none;
    }
    .plan-benefits-list + .plan-benefits-list {
        margin-top: 0;
    }
}
.registration-subhead {
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 8px;
}
/* Schrittanzeige Mitgliedschaft (U17, 2026-10-17), frontend/shared/membership_steps.tpl:
   Registrierung = Schritt 1, Mitgliedsantrag = Schritt 2. */
.membership-steps {
    margin: 24px 0 16px;
}
.membership-steps-count {
    margin: 0 0 6px;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-text-label);
}
.membership-steps ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: membership-step;
}
.membership-steps li {
    counter-increment: membership-step;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 4px;
    border: 1px solid var(--ba-border-strong);
    border-radius: 999px;
    font-size: var(--ba-text-sm);
    color: var(--ba-text-label);
}
.membership-steps li::before {
    content: counter(membership-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ba-surface-3);
    color: var(--ba-text);
    font-weight: 600;
}
.membership-steps li.is-current {
    border-color: var(--ba-primary);
    color: var(--ba-text-strong);
    font-weight: 600;
}
.membership-steps li.is-current::before {
    background: var(--ba-primary);
    color: var(--ba-text-on-brand);
}
.membership-steps li.is-done::before {
    content: "\2713";
    background: var(--ba-success);
    color: var(--ba-text-on-brand);
}
/* Formularfelder als Raster (PW 2026-10-04), Vorbild Mitgliedsantrag (.fld-row):
   Anrede | Vorname | Nachname, darunter E-Mail | Passwort. Die Spalte gibt die
   Breite vor; die Altlasten .component-form .control-group { width: 49% } und
   .form-control { width: 97% } werden hier neutralisiert. */
.reg-row {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}
.reg-row > * { min-width: 0; }
.reg-row-name { grid-template-columns: minmax(170px, 1fr) 2fr 2fr; }
.reg-row-2    { grid-template-columns: 1fr 1fr; }
/* Mit Komponenten-Praefix: .component-form .control-group steht weiter unten
   in dieser Datei und wuerde bei gleicher Spezifitaet gewinnen. */
.component-biker-registration .reg-row .control-group,
.component-biker-registration .reg-row .form-control,
.component-biker-registration .reg-row .pw-field {
    display: block;
    width: 100%;
}
.component-biker-registration .reg-row .control-group { margin-bottom: 0; }
/* Select in dieselbe Floating-Label-Hoehe wie die Inputs daneben (22px
   Labelstreifen). Ein Select hat immer einen Wert, das Label sitzt fest oben. */
.reg-row .formo-select.control-group {
    position: relative;
    padding-top: 22px;
}
.reg-row .formo-select > .control-label {
    position: absolute;
    top: 2px;
    left: 13px;
    z-index: 2;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--ba-blue-600);
    pointer-events: none;
}
.component-biker-registration .formo-checkbox {
    margin: 4px 0 0;
}
.reg-newsletter-member {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--ba-text-label);
}
@supports selector(:has(*)) {
    .reg-newsletter-member { display: none; }
    .component-biker-registration:has(input.js-membership[value="new_member"]:checked) .reg-newsletter-guest { display: none; }
    .component-biker-registration:has(input.js-membership[value="new_member"]:checked) .reg-newsletter-member { display: block; }
}
@media (max-width: 600px) {
    /* Anrede ueber die volle Breite, Vor- und Nachname nebeneinander */
    .reg-row-name { grid-template-columns: 1fr 1fr; }
    .reg-row-name > :first-child { grid-column: 1 / -1; }
    .reg-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .plan-tile {
        grid-template-columns: 1fr;
        padding: 12px 14px;
        border-radius: 4px 16px 16px 4px;
    }
    .plan-ring {
        display: none;
    }
    .plan-name {
        font-size: 18px;
    }
    .plan-price {
        font-size: 13px;
    }
    .plan-benefits {
        padding: 18px 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .plan-ring::after,
    .plan-tile {
        transition: none;
    }
}

/* Einklappbare Abschnitte im CMS-Text (Mitglied werden, page.js, Migration
   20261004110000). Unter 900 px zu; aufgeklappt klebt die Ueberschrift unter
   der Navbar und klappt per Tipp wieder ein. Darueber offen, die Ueberschrift
   sieht aus wie jede andere H2.
------------------------------------ */
.collapse-mobile > summary {
    display: block;
    list-style: none;
    cursor: default;
}
.collapse-mobile > summary::-webkit-details-marker { display: none; }
@media (max-width: 899px) {
    .collapse-mobile {
        border-bottom: 1px solid var(--ba-border);
        scroll-margin-top: var(--navbar-height, 132px);
    }
    .collapse-mobile:not(.collapse-mobile + .collapse-mobile) {
        border-top: 1px solid var(--ba-border);
    }
    .collapse-mobile > summary {
        cursor: pointer;
        position: relative;
        padding: 14px 34px 14px 0;
    }
    /* Klebend nur der offene Abschnitt, und ohne Transition auf top: sieben
       Sticky-Ebenen, deren top beim Hochscrollen animiert zurueckfaehrt, malt
       iOS-Safari nicht sauber neu (leere Rahmen, verschobene Ueberschriften,
       2026-10-04). */
    .collapse-mobile[open] > summary {
        position: sticky;
        top: var(--navbar-height, 132px);
        z-index: 5;
        background: var(--ba-surface);
        /* deckt die 15 px Spaltenrand mit ab, sonst blitzen Links darunter durch */
        box-shadow: -15px 0 0 var(--ba-surface), 15px 0 0 var(--ba-surface);
        border-bottom: 1px solid var(--ba-border);
    }
    /* Navbar faehrt beim Runterscrollen weg (page.js), dann rueckt die
       Ueberschrift nach oben; beim Hochscrollen zurueck unter die Navbar. */
    .navbar-scroll-hidden .collapse-mobile[open] > summary {
        top: 0;
    }
    .collapse-mobile > summary h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.3;
    }
    .collapse-mobile > summary::after {
        content: '+';
        position: absolute; right: 6px; top: 50%;
        transform: translateY(-50%);
        font-size: 24px; font-weight: 400; line-height: 1;
        color: var(--ba-blue-500);
    }
    .collapse-mobile[open] > summary::after { content: '\2212'; }
    .collapse-mobile-body {
        padding: 16px 0 4px;
    }
}

/* Immer klappbar (h3.js-collapse, Details zur Mitgliedschaft, Migration
   20261004160000): auf jeder Breite zu, Tipp auf die Ueberschrift klappt auf.
   Unter 900 px kommen die klebende Ueberschrift und das Plus von oben dazu. */
.collapse-always {
    border-bottom: 1px solid var(--ba-border);
}
.collapse-always:not(.collapse-always + .collapse-always) {
    border-top: 1px solid var(--ba-border);
}
.collapse-always > summary {
    position: relative;
    cursor: pointer;
    padding: 14px 34px 14px 0;
}
.collapse-always > summary h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
}
.collapse-always > summary::after {
    content: '+';
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    font-size: 24px; font-weight: 400; line-height: 1;
    color: var(--ba-blue-500);
}
.collapse-always[open] > summary::after { content: '\2212'; }
.collapse-always > .collapse-mobile-body {
    padding: 4px 0 8px;
}
.collapse-always + :not(.collapse-always) {
    margin-top: 24px;
}

/* Mitglied werden (mobil): Kopfbild flacher, die 14 Fotos der Sidebar als
   Wisch-Streifen statt 3.200 px untereinander. Nur auf der Seite mit dem
   Registrierungsformular, die Komponenten gibt es ueberall.
------------------------------------ */
@media (max-width: 899px) {
    .l-sub:has(.component-biker-registration) .big-header .component-jumbotron,
    .l-sub:has(.component-biker-registration) .big-header .component-jumbotron .image {
        height: 260px;
    }
    .l-sub:has(.component-biker-registration) .big-header .scroll-indicator {
        display: none;
    }
    .l-sub:has(.component-biker-registration) .sidebar .component-image .well {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        padding: 10px;
    }
    .l-sub:has(.component-biker-registration) .sidebar .component-image .thumbnail {
        flex: 0 0 72%;
        float: none;
        width: auto;
        margin: 0;
        scroll-snap-align: start;
    }
    .l-sub:has(.component-biker-registration) .sidebar .component-image .thumbnail img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
}

/* Partner
--------------------------------------------------------------------------------------------------------------------- */
.component-partner {
    position: relative;
    z-index: 9;
    background: var(--ba-white);
}
.component-partner-footer {
    margin-top: 15px;
    text-align: center;
    background: var(--ba-white);
}
.component-partner-footer img {
    width: 95px;
    height: auto;
    margin: 0 6px;
    opacity: 0.5;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
.component-partner-footer a:hover img {
    opacity: 1;
}
/* Scroll-Fade-In
--------------------------------------------------------------------------------------------------------------------- */
.fade-in-target {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in-target.fade-in-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .fade-in-target {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Card Hover-Lift
--------------------------------------------------------------------------------------------------------------------- */
.component-link-image,
.component-link-horizontal,
.component-partner-list .item .thumbnail {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.component-link-image:hover,
.component-link-horizontal:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.component-partner-list .item .thumbnail:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

/* Partner-List
--------------------------------------------------------------------------------------------------------------------- */
.component-partner-list .item {
    height: 130px;
}
.component-partner-list .item .thumbnail {
    -webkit-display: flex;
    display: flex;
    align-items: center;
    height: 130px;
}
.component-partner-list .item .thumbnail a {
    margin: 0 auto;
}

/* Donations
--------------------------------------------------------------------------------------------------------------------- */
/* Sidebar
------------------------------------ */
.sidebar .component-donations-counter {
    display: block;
    margin: inherit;
    border: 2px solid #ececec;
    border-radius: 4px;
    background: var(--ba-white);
    color: var(--ba-blue-700);
}
.sidebar .component-donations-counter .counter {
    background-size: 140% 60%;
}
.sidebar .component-donations-counter .col {
    float: none;
    width: 100%;
}
.sidebar .component-donations-counter p {
    display: none;
}
.sidebar .component-donations-counter .donation {
    font-size: 40px;
}
.sidebar .counter h2 {
    margin: 0 0 35px;
}
.sidebar .component-donations-counter h2,
.sidebar .component-donations-counter p,
.sidebar .component-donations-counter .donation {
    color: var(--ba-blue-700);
}

/* Footer
------------------------------------ */
.component-donations-counter {
    display: block;
    position: relative;
    z-index: 9;
    margin: 0;
    background: var(--ba-blue-500);
    background-size: cover;
    color: var(--ba-text-on-brand);
}
/* Nur die Ueberschrift ist ein Link (U12), der Block selbst nicht mehr. */
.component-donations-counter h2 a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.component-donations-counter h2 a:hover,
.component-donations-counter h2 a:focus {
    text-decoration-thickness: 2px;
}
.component-donations-counter .counter {
    margin: 0 auto;
    padding: 20px 15px 30px;
    max-width: 1170px;
    background: url("/media/images/default/mountains.png") no-repeat center bottom;
}
.component-donations-counter .donation {
    margin-top: -25px;
    font-size: 80px;
    font-weight: 300;
    white-space: nowrap;
}
.component-donations-counter h2,
.component-donations-counter p,
.component-donations-counter .donation {
    color: var(--ba-text-on-brand);
}
@media (max-width: 991px) {
    .component-donations-counter .donation {
        margin-top: 0;
    }
    .component-donations-counter {
        text-align: center;
    }
}
@media (max-width: 767px) {
    .component-donations-counter .donation {
        font-size: min(65px, 15vw);
        margin-top: 0;
    }
}

/* BikeAid Gallery
--------------------------------------------------------------------------------------------------------------------- */
.component-album .item {
    position: relative;
    height: 340px;
    overflow: hidden;
}
.component-album .image {
    position: relative;
    height: 240px;
    border-radius: 4px;
    border-bottom: 4px solid var(--ba-blue-500);
    overflow: hidden;
}
.component-album .album-image {
    height: 240px;
    background-size: cover;
    background-position: center center;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
.component-album .flag {
    left: 13px;
    position: absolute;
    top: 232px;
}
.component-album .item:hover .album-image {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
.component-album .item h2 {
    margin-top: 15px;
}

/* Übersicht
------------------------------------ */
.component-gallery-show .image-grid {
    text-align: center;
}
.component-gallery-show .item {
    display: inline-block;
    overflow: hidden;
    padding: 5px 2px;
    width: 33%;
    max-height: 230px;
    vertical-align: top;
}
.component-gallery-list .item img {
    max-width: 230px;
    margin-right: 20px;
}
.component-gallery-show .title {
    padding: 15px;
    background: var(--ba-blue-700);
    color: var(--ba-text-on-brand);
    border-bottom: 5px solid var(--ba-white);
}
.component-gallery-show .title a {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--ba-white);
    color: var(--ba-text-on-brand);
}
.component-gallery-show .title img {
    width: 20px;
    height: 20px;
}
.component-gallery-show .title h1 {
    margin: 0;
}
.component-gallery-show img {
    width: 100%;
    height: auto;
    border-radius: 0;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.1s ease-in-out 0s;
}
.component-gallery-show .caption {
    display: none;
}
.component-gallery-show img:hover {
    opacity: 0.8;
}
@media (max-width: 991px) {
    .component-gallery-show .item {
        width: 32%;
    }
}
@media (max-width: 767px) {
    .component-gallery-show .item {
        width: 49%;
    }
}
@media (max-width: 480px) {
    .component-gallery-show .item {
        width: 100%;
    }
}
/* Swipe Hint (mobile gallery)
------------------------------------ */
.component-gallery {
    position: relative;
}
.component-gallery .swipe-hint {
    display: none;
}
@keyframes swipe-hint-fade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}
@media (max-width: 767px) {
    .component-gallery .swipe-hint {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 10;
        padding: 0 10px;
        pointer-events: none;
        opacity: 0;
    }
    .component-gallery .swipe-hint.swipe-hint-animate {
        animation: swipe-hint-fade 2.5s ease-out forwards;
        animation-delay: 0.4s;
    }
    .component-gallery .swipe-hint-arrow {
        width: 38px;
        height: 38px;
        background: rgba(0, 0, 0, 0.38);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ba-text-on-brand);
        font-size: 26px;
        line-height: 1;
    }
}
/* Toast Notifications (#8)
------------------------------------ */
.toast-snackbar {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 9999;
    min-width: 280px;
    max-width: 520px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    padding: 13px 16px 13px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--ba-text-on-brand);
    animation: toast-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.toast-snackbar.toast-out {
    animation: toast-out 0.3s ease forwards;
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(-50%) translateY(16px); }
}
.toast-snackbar.toast-notice  { background: #37474f; }
.toast-snackbar.toast-success { background: #2e7d32; }
.toast-snackbar.toast-danger  { background: #c62828; }
.toast-snackbar.toast-info    { background: #1565c0; }
.toast-snackbar.toast-warning { background: #e65100; }
.toast-message {
    flex: 1;
}
.toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 6px;
    flex-shrink: 0;
}
.toast-close:hover {
    color: var(--ba-text-on-brand);
}
@media (max-width: 767px) {
    .toast-snackbar {
        bottom: 16px;
        min-width: 0;
        width: calc(100% - 32px);
        max-width: none;
    }
}
/* Events
--------------------------------------------------------------------------------------------------------------------- */
/* Calendar
------------------------------------ */
.component-calendar table {
    margin: 0;
}
.component-calendar table tbody {
    border: 0 none;
}
.component-calendar table tr td {
    padding: 8px 0;
    border: 0 none;
    text-align: center;
    vertical-align: middle;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.1s ease-in-out 0s;
}
.component-calendar table tr td a {
    color: var(--ba-blue-500);
}
.component-calendar table tr td.today,
.component-calendar table tr td:hover {
    background: #c7dbeb;
    border-radius: 4px;
}
.component-calendar table tr td.today a {
    color: #103a5c;
}
.component-calendar .headline-current-month {
    text-align: center;
}
.button-previous-month,
.button-next-month {
    width: 20px;
    height: 20px;
    display: block;
    background: url("/media/images/default/arrow-left.svg") no-repeat center center;
}
.button-next-month {
    float: right;
    background: url("/media/images/default/arrow-right.svg") no-repeat center center;
}
/* Kalender-Filter (U16, 2026-10-17): Labels ueber den Feldern, Von und Bis
   nebeneinander. Ersetzt die Regeln fuer das alte Markup (col-xs-5, ein
   schwebendes „bis"-Label zwischen den Datumsfeldern). */
.component-calendar .event-search label {
    display: block;
    margin: 0 0 4px;
    font-size: var(--ba-text-sm);
    font-weight: 600;
    color: var(--ba-text-label);
}
.component-calendar .event-search .form-control {
    width: 100%;
}
.component-calendar .event-search-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* List
------------------------------------ */
.component-event-list {
    position: relative;
    top: 20px;
}
.component-event-list .item {
    border-bottom: 1px solid var(--ba-grey-200);
    margin-bottom: 30px;
    padding-bottom: 30px;
    position: relative;
}
.component-event-list h3 {
    margin-top: 0;
}
.component-event-list .item .infos {
    position: absolute;
    padding: 2px 8px;
    width: 100%;
    top: -20px;
    left: 0;
    background: var(--ba-blue-500);
    border-radius: 4px 4px 0 0;
}
.component-event-list .item .specs {
    margin-bottom: 10px;
}
.component-event-list .item .infos .badge {
    float: right;
    padding: 0;
    line-height: normal;
}
.component-event-list .item .infos .category {
    font-size: 12px;
    font-weight: bold;
    color: var(--ba-text-on-brand);
}
.component-event-list .item .image {
    height: 85px;
    width: 100%;
    /*border: 1px solid #ddd;*/
    border-radius: 4px;
    /*background: #f7f7f7 url("/media/images/default/no-image.svg") no-repeat center center / 35% auto;*/
}
.component-event-list .specs .date,
.component-event-list .specs .location {
    display: inline-block;
    margin-right: 10px;
}
.component-event-list .item span img {
    margin: -2px 3px 0 0;
}
.btn-event-list.visible-xs {
    margin-top: 15px;
}
.component-event-list .more-info,
.component-event-list .add-ical,
.component-event-list .btn-add-user {
    float: right;
    margin: 0 0 8px 8px;
    padding: 5px 6px;
}
.component-event-list .item input.btn.btn-logged-in[type="submit"] {
    height: 35px;
    width: 37px;
    margin: 0 0 8px 8px;
    background: var(--ba-red-600) url("/media/images/default/icon-add-user-white.png") no-repeat center center !important;
}

/* Event-image by category if no image is set */

.component-event-list .item .image.MTB-Tour {
    
}
.component-event-list .item .image.Technik-Training {
    
}
.component-event-list .item .image.MTB-Camp {
    
}
.component-event-list .item .image.RR-Training {
    
}
.component-event-list .item .image.Charity {
    
}
.component-event-list .item .image.Versammlung {
    
}
.component-event-list .item .image.MTB-Rennen {
    
}
.component-event-list .item .image.RR-Rennen {
    
}
.component-event-list .item .image.Flüchtlingsprojekt {
    
}
.component-event-list .item .image.Calendar.Pro {
    
}
.component-event-list .item .image.Partner-Veranstaltung {
    
}
.component-event-list .item .image.CTF {
    
}
.component-event-list .item .image.Ladies.Only {
    
}
.component-event-list .item .image.Kids.Only {
    
}
.component-event-list .item .image.E-MTB {
    
}



@media (min-width: 650px) {
    .component-event-list .btn {
        width: auto;
    }
}
@media (max-width: 650px) {
    .component-event-list .item .date {
        width: 100%;
    }
    .component-event-list .specs span {
        display: block;
    }
    .component-event-list .col-xs-6 {
        width: 100%;
    }
}

/* Eventlist Sidebar
--------------------------------------- */
.sidebar .component-eventhighlight-sidebar .btn {
	width: auto;
	margin-top: 5px;
	padding: 2px 8px;
	font-size: 12px;
}
.sidebar .component-eventhighlight-sidebar .pager li a, .sidebar .component-eventhighlight-sidebar .pager li span {
	font-size: 12px;
	padding: 5px 6px;
	margin: 0;
}
.sidebar .component-eventhighlight-sidebar .pager li a i {
	display: none;
}

/* Details
------------------------------------ */
.component-event-detail dt {
    padding: 10px 0 0;
}
.component-event-detail dd {
    margin: 0;
    padding: 10px 0 10px 200px;
}
.component-event-detail .panel-group .caption {
    display: none;
}
.component-event-detail .panel-title a {
    display: block;
}
.component-event-detail .well {
    margin-bottom: 0;
    border-bottom: 0 none;
    border-radius: 4px 4px 0 0;
}
.component-event-detail .btn {
    width: 100%;
}
.further-dates {
    left: 200px;
    margin: 0;
    position: relative;
}
.further-dates a.btn {
    width: auto;
}
.further-dates .dropdown-menu > li > a {
    padding: 5px;
}
.further-dates .dropdown-menu {
    padding: 10px;
    width: 195px;
}
.further-dates .dropdown-menu li {
    padding: 3px;
}
.component-event-detail .panel-heading {
    background: var(--ba-grey-25);
}
.component-event-detail .contact-panel {
    border-radius: 0;
    border-bottom: 0 none;
}
.component-event-detail .map-panel {
    border-radius: 0 0 4px 4px;
    margin: 0 !important;
}

/* Map Panel */
.map-panel .panel-body {
    padding: 0;
}
.map-panel .panel-body a {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 15px;
}
.map-panel .map-badge {
    height: auto;
}
.map-panel .map-badge .map-holder .map {
    height: 300px !important;
}
iframe body {
    margin: 0;
}

/* Detail Related Events */
.component-related-events h3,
.component-related-events h3 a {
    font-size: 16px;
    margin-bottom:0;
}
.component-related-events .item {
    border-bottom: 1px solid var(--ba-grey-100);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.component-related-events .item:last-of-type {
    border-bottom: 0 none;
    padding: 0;
}

/* Detail Sidebar */
.participant {
    display: inline-block;
    position: relative;
    width: 31%;
}
.component-event-detail-sidebar .select2 {
    margin-top: 20px;
}
.component-event-detail-sidebar .select2-selection__arrow {
    /*display: none;*/
}
.component-event-detail-sidebar .select2-container--default .select2-selection--single {
    border-radius: 0;
}
.participant-list {
    overflow: hidden;
    margin: 0 0 20px;
    max-height: 200px;
    text-align: center;
}
.participant-list a.label-delete {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    border-radius: 10px;
    display: inline-block;
    padding: 5px 7px;
}
.participant-list.active {
    height: auto;
    max-height: none;
}
.participant-list a.biker {
    color: var(--ba-blue-900);
    display: inline-block;
    margin-bottom: 10px;
    padding: 0;
    background: 0 none;
    border: 0 none;
    vertical-align: top;
    text-align: left;
}
.participant-list a.biker:hover, .participant-list a.biker:visited {
    color: var(--ba-blue-900);
}
.participant-list img {
    width: 60px;
    height: 60px;
    border: 1px solid #eee;
}
.participant-list a.biker em {
	display: table-cell;
	vertical-align: middle;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	background: url('/media/images/default/no-biker-image-male.svg') no-repeat 0 0;
}
.participant-list a.biker em.gender_2 {
	background-image: url('/media/images/default/no-biker-image-female.svg');
}
/* Ohne Anrede oder mit „keine Angabe" (U17) der neutrale Platzhalter statt
   des maennlichen Standards. */
.participant-list a.biker em.gender_0,
.participant-list a.biker em.gender_3 {
	background-image: url('/media/images/default/no-biker-image.svg');
}
.mail-button {
    margin-top: 10px;
}

/* Highlights in Sidebar */
.component-eventhighlight li:last-child hr {
    display: none;
}

/* Sold-out */
.sold-out {
    color: var(--ba-text-on-brand);
}

/* Mobile */
@media (max-width: 991px) {
    .participant-list button {
        width: auto;
    }
}
@media (max-width: 767px) {
    .further-dates {
        left: 0;
    }
}

/* Forum
--------------------------------------------------------------------------------------------------------------------- */
.component-eventhighlight-sidebar .well {
    background: #f3f3f3;
    bordeR: 0 none;
}
.component-eventhighlight-sidebar .well h3 {
    margin: 3px 0 0;
    font-size: 15px;
    line-height: 18px;
}
.component-eventhighlight-sidebar .well a {
    font-size: 15px;
    color: var(--ba-blue-900);
}
.component-eventhighlight-sidebar .well p {
    margin: 0;
}
.component-eventhighlight-sidebar .well img {
    width: 15px;
    margin-top: -3px;
}

    /* Forum
    --------------------------------------------------------------------------------------------------------------------- */
/* Board
------------------------------------ */
.component-forum .pagetitle .btn {
    margin: 17px 0 0;
}
.component-forum .heads,
.component-forum .item {
    display: table;
    width: 100%;
}
.component-forum .heads div,
.component-forum .item div {
    display: table-cell;
    vertical-align: middle;
}
.component-forum .heads {
    border-radius: 5px;
    background: var(--ba-blue-500);
    padding: 10px;
}
.component-forum .item {
    padding: 10px;
    border-bottom: 1px solid var(--ba-grey-100);
}
.component-forum .heads div {
    color: var(--ba-text-on-brand);
}
.component-forum .board {
    width: 30%;
}
.component-forum .thread-amount {
    width: 15%;
    text-align: right;
    padding-right: 40px;
}
.component-forum .action {
    width: 30%;
}

/* Threadlist
------------------------------------ */
.component-forum .thread {
    width: 30%;
}
.component-forum .posts {
    width: 15%;
}
.component-forum .created-by {
    width: 20%;
}
.component-forum .last-reply {
    width: 30%;
}

/* Show Thread
------------------------------------ */
.component-forum .thread-item .heads {
    position: relative;
    padding: 17px 20px 0 70px;
    height: 55px;
    border-radius: 25px 0 0 25px;
    background: var(--ba-grey-100);
}
.component-forum .heads .user-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    height: 55px;
}
.component-forum .thread-item .comment {
    padding: 20px;
}
.component-forum .respond textarea {
    height: 150px;
    margin-bottom: 15px;
    width: 100%;
}

.component-forum .comment p small {
    font-size: 10px !important;
}

.component-forum .highlight {
    border-radius: 5px;
    background-color: #fcf8e3 !important;
}
.component-forum .highlight .heads {
    border-radius: 5px 5px 0 0 !important;
    background: #fff2b0 none repeat scroll 0 0 !important;
}
.component-forum .comment-edit {
    margin: 0 3px;
}

.component-forum .thread-delete,
.component-forum .thread-edit {
    margin-right: 10px !important;
    color: white;
}

/* Forum Mobile
------------------------------------ */
@media (max-width: 767px) {
    .component-forum .heads div,
    .component-forum .item div {
        display: block;
        width: 100%;
        text-align: left;
    }
    .component-forum .btn {
        margin: 20px 0;
    }
    .thread-item {
        clear: both;
    }
}

/* Form Builder
------------------------------------ */
.form-horizontal .form-group {
    margin: 0;
}
.form-horizontal .form-group label {
    text-align: left;
}
.component-form .form-group {
    margin-bottom: 15px;
}
.component-form.formbuilder .control-group {
    margin-bottom: 15px;
}
.component-form .control-group {
    display: inline-block;
    position: relative;
    width: 49%;
    vertical-align: top;
}
.component-form .control-group label {
    display: block;
    font-weight: 400;
}
.form-control {
    display: block;
    width: 97%;
    height: 34px;
    padding: 5px 12px;
    font-size: 15px;
    line-height: 1.428571429;
    color: var(--ba-grey-700);
    border: 1px solid #ddd;
    box-shadow: none;
}
input[type="file"] {
    padding: 0;
}
.component-form .form-control:focus {
    box-shadow: 0 0 3px #ccc;
}
/* iOS Safari zoomt beim Fokussieren von Feldern mit font-size < 16px in die
   Seite hinein und bleibt nach dem Ausfuellen gezoomt haengen. 16px
   unterbindet den Auto-Zoom komplett. Nur mobil -- am Desktop bleibt die
   kompaktere 15px-Optik. */
@media (max-width: 991px) {
    .form-control {
        font-size: 16px;
    }
}
/* Datepicker-Felder sind auf Touch-Geraeten readonly (Tastatur soll nicht
   ueber dem Kalender aufgehen, siehe application.tjs) -- Bootstrap stylt
   readonly aber grau wie disabled. Das Feld ist bedienbar, also normal
   weiss und mit Zeige-Cursor darstellen. */
input.datepicker[readonly] {
    background-color: var(--ba-surface, #fff);
    cursor: pointer;
}
/* Bootstrap-Datepicker (Geburtsdatum im Mitgliedsantrag): Standardzellen
   sind am Handy kaum treffbar. Auf Touch-Breiten auf >=40px Touch-Target
   und 16px Schrift anheben. */
@media (max-width: 991px) {
    .datepicker.dropdown-menu {
        font-size: 16px;
    }
    .datepicker.dropdown-menu td,
    .datepicker.dropdown-menu th {
        width: 40px;
        height: 40px;
    }
}
.field.control-group.formo-checkboxes {
    width: 100%;
}
.component-form .control-group.formo-checkbox,
.component-form .control-group.formo-radios {
    width: 100%;
}
.component-form .formo-checkbox,
.component-form .control-group.checkbox {
    width: 100%;
}
.component-form .control-group.formo-checkbox input,
.component-form .control-group.formo-radios input {
    position: absolute;
    margin: 0;
    top: 6px;
    width: auto;
    height: auto;
}
.component-form .control-group.formo-radios input {
    left: -20px;
}
.component-form .control-group.formo-textarea {
    display: block;
    width: 96.2%;
}
.component-form .control-group textarea {
    width: 100%;
    height:200px;
}
.hp-layout,
.sidebar .hp-layout {
    display: none !important;
}
.required {
    color: var(--ba-red-600);
}
.error input,
.error textarea,
.error select {
    border: 1px solid var(--ba-red-600) !important;
    box-shadow: 0 0 3px var(--ba-red-600) !important;
}
.error .opt-label {
    color: var(--ba-red-600) !important;
}
.component-form.formbuilder .formo-checkbox label {
    padding-left: 20px;
}

/* Submit = Hauptaktion des Formulars (U10, 2026-10-17). Bis dahin ein kleiner
   hellblauer Knopf (weiss auf #4789be, 3,75:1), der neben dem Formular kaum
   auffiel. Jetzt volle Groesse in der Primaerfarbe. .btn-submit traegt denselben
   Stil fuer Formulare ausserhalb von .component-form (Profil, Freistellung).
   Ausgenommen ist die Kontouebersicht: Abos und Erinnerungen sind dort
   Nebenaktionen. Bedeutung der Farben: Rot (.btn-primary) ist der Aufruf
   „Mitglied werden", diese Flaeche die Hauptaktion eines Formulars, das
   hellere .btn-default alles andere. height: auto, weil das Formbuilder-Submit
   zusaetzlich .form-control mit fester Hoehe traegt. */
.component-form:not(.component-account-overview) input[type="submit"],
.btn.btn-submit {
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 10px 28px;
    position: relative;
    overflow: hidden;
    z-index: 100;
    background: var(--ba-primary);
    color: var(--ba-text-on-brand) !important;
    border: 0 none;
    border-radius: 5px;
    font-size: var(--ba-text-base);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}

.component-form:not(.component-account-overview) input[type="submit"]:hover,
.component-form:not(.component-account-overview) input[type="submit"]:focus,
.btn.btn-submit:hover,
.btn.btn-submit:focus {
    background: var(--ba-primary-deep);
    color: var(--ba-text-on-brand);
}
/* Freistellung: handgeschriebenes Formular ohne Formo-Abstaende (U7). */
.component-team-exemption .submit-area {
    margin-top: var(--ba-space-md);
}
.component-team-exemption .dl-horizontal {
    margin: var(--ba-space-md) 0 0;
}
@media (max-width: 767px) {
    .component-form .form-group {
        display: block;
        width: 100%;
    }
    .component-form .control-group {
        width: 100%;
    }
    .btn-form-help {
        width: auto;
    }
    .component-form input[type="submit"],
    .btn.btn-submit {
        width: 100%;
        white-space: normal;
    }
}

/* Sceditor */

.sceditor-button {
    padding: 0 !important;
}

/* Sitemap
--------------------------------------------------------------------------------------------------------------------- */
.component-sitemap .nav {
    width: 100%;
}
.component-sitemap .nav li {
    float: none;
}
.component-sitemap .nav > li > a {
    margin: 15px 0 20px;
    display: block;
    font-size: 24px;
    background: var(--ba-grey-25);
    border-radius: 5px;
    color: var(--ba-link);
}
.component-sitemap .nav > li > a:hover {
    background: var(--ba-grey-100);
}
.component-sitemap .nav > li > a {
    text-transform: none;
    font-weight: 400;
}
/* Die Sitemap rendert mit ul.navbar-nav, damit greifen sonst die Dropdown-
   Regeln der Hauptnavigation (absolut, Schatten, Hover, Pfeil, Mobil-Streifen).
   Hier alles auf eine normale, eingerueckte Liste zuruecksetzen. */
.component-sitemap .nav.navbar-nav ul {
    display: block;
    position: static;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0 0 0 28px;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.component-sitemap .nav.navbar-nav ul:empty {
    display: none;
}
.component-sitemap .nav.navbar-nav ul ul {
    margin-bottom: 0;
}
.component-sitemap .nav.navbar-nav ul li {
    list-style: square;
    padding: 0;
    border: 0;
}
.component-sitemap .nav.navbar-nav ul li a {
    display: inline-block;
    padding: 5px 0;
    white-space: normal;
}
.component-sitemap .nav.navbar-nav ul li a:hover {
    background: none;
    text-decoration: underline;
}
.component-sitemap .nav.navbar-nav > li > a:after {
    content: none;
}

/* Event Highlight - Start
--------------------------------------------------------------------------------------------------------------------- */
.component-events-start {
    padding: 50px 0 100px 0;
    background: url("/media/images/default/bg-event-start.jpg") no-repeat top center;
    background-size: cover;
    margin: 0;
}
.component-events-start a,
.component-events-start span,
.component-events-start div {
    color: var(--ba-text-on-brand);
}
.component-events-start .item {
    padding-bottom: 20px;
    border-bottom-width: 2px;
    border-color: var(--ba-text-on-brand);
    background: rgba(255,255,255, 0.2);
    transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.component-events-start .item .specs {
    margin: 0;
}
.component-events-start path {
    fill: var(--ba-white);
}
.component-events-start .item:hover {
    transform: scale(1.03);
    background: rgba(255,255,255, 0.3);
}
.component-events-start .item.highlight .date {
    position: absolute;
    padding: 6px 20px 10px;
    top: 0;
    left: 0;
    border-radius: 0 0 4px 0;
    background: var(--ba-white);
    font-family: 'Roboto Slab', sans-serif;
    color: var(--ba-blue-500);
}
.component-events-start .item.highlight .date span {
    vertical-align: text-bottom;
    margin-right: -5px;
    font-size: 25px;
    line-height: 28px;
    color: var(--ba-blue-600);
}
.component-events-start .item.highlight .category {
    position: absolute;
    width: 210px;
    top: 10px;
    right: 20px;
    text-align: right;
}
.component-events-start .item.highlight h2 {
    margin-top: 40px;
}
.component-events-start .badge.users {
    position: absolute;
    padding-right: 15px;
    top: 0;
    right: 0;
    border-radius: 0 0 0 5px;
    color: #666;
    font-size: 11px;
    background: var(--ba-white);
}

/* Old Webkit Browsers — entfernt am 2026-07-26
   ---------------------------------------------------------------------------------------------------------------------
   Hier stand ein Block

       @media screen and (min-width:-100px) and (-webkit-min-device-pixel-ratio:0) {
           _::-moz-svg-foreign-content, .logo { ... }
       }

   der in KEINEM Browser griff:

   - (-webkit-min-device-pixel-ratio:0) trifft nur Chrome und Safari.
   - _::-moz-svg-foreign-content ist ein Firefox-Hack. In einer Selektorliste
     verwirft ein ungueltiger Selektor die ganze Regel -- in Chrome fiel damit
     alles weg, was die Query eingeschlossen hatte.
   - In Firefox war die Liste gueltig, aber die Query traf nicht zu.
   - Dazu enthielt er /... in doppelten Klammern: unaufgeloeste
     Smarty-Syntax in einer statisch ausgelieferten CSS-Datei, also ohnehin kein
     gueltiges url().

   Der Kommentar sprach von "Old Webkit Browsers" -- gemeint waren offenbar
   Geraete um 2012. Aufgefallen ist der Block bei der Breakpoint-Konsolidierung,
   weil min-width:-100px als Bedingung immer wahr ist.
   --------------------------------------------------------------------------------------------------------------------- */


/* Edit Page / Article Link
--------------------------------------------------------------------------------------------------------------------- */
a.edit-page,
a.edit-article,
a.delete-article,
a.delete-event {
    position: absolute;
    background: #a0211b;
    right: 0;
    top: -30px;
    color: var(--ba-text-on-brand);
    font-weight: normal;
}
a.delete-article,
a.delete-event {
    right: inherit;
    left: 0;
}
a.edit-article {
    right: 130px;
}
/* Zweiter Badge: Direktlink in das Modul, das den Seiteninhalt pflegt
   (Racing-Roster, FAQ, Partner). a.edit-page liegt absolut auf right:0 --
   ohne Versatz lägen beide Badges übereinander. Wächst nach links, taugt
   also für unterschiedlich lange Beschriftungen. */
a.edit-content {
    right: 135px;
}
a.edit-page:hover,
a.edit-article:hover {
    background: #781611;
}

/* Lightbox Custom
--------------------------------------------------------------------------------------------------------------------- */
#colorbox, #cboxOverlay, #cboxWrapper, #cboxContent {
    overflow: visible !important;
}
#cboxCurrent {
    bottom: -40px !important;
    left: 0 !important;
    color: var(--ba-text-on-brand) !important;
}
#cboxNext,
#cboxPrevious {
    position: absolute !important;
    width: 70px !important;
    height: 95% !important;
    bottom: 4% !important;
    font-size: 0 !important;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
#cboxNext {
    left: inherit !important;
    right: 0 !important;
    background: url("/media/images/default/icon-next.png") no-repeat center center !important;
    text-indent: 100px !important;
    opacity: 0.5;
}
#cboxPrevious {
    left: 0 !important;
    right: inherit !important;
    background: url("/media/images/default/icon-prev.png") no-repeat center center !important;
    text-indent: -100px !important;
    opacity: 0.5;
}
#cboxPrevious:hover,
#cboxNext:hover {
    opacity: 1;
}
#cboxClose {
    font-size: 0 !important;
    width: 50px !important;
    height: 50px !important;
    top: 10px !important;
    bottom: inherit !important;
    right: 10px !important;
    background: url("/media/images/default/icon-close.png") no-repeat center center !important;
    text-indent: 140px;
}

.cropper-container img {
    max-width: 100%;
}

/* Marked */

.cmp-marked-article .btn {
    width: 100%;
}
.cmp-marked-article mark {
    background: var(--ba-red-600);
    padding: 1px 5px;
    color: var(--ba-text-on-brand);
}
/*.grecaptcha-badge {*/
    /*display: none!important;*/
/*}*/



footer .nav li a, .cc-compliance>.cc-btn{
    z-index: 1;
}




/* Social Media Icons -- MOBILE
--------------------------------------------------------------------------------------------------------------------- */

.social-icons-sm {
    /* Steht seit U11 (2026-10-17) hinter dem Login-Dropdown, und das ist
       pull-right: ohne clear floss der Linktext um das Formular herum. */
    clear: both;
    list-style: none;
    padding: 16px 12px;
}
.social-icons-sm .social-link {
    margin-bottom: 20px;
}
.social-icons-sm .social-link a {
    display: flex;
    align-items: center;
}
.social-icons-sm .social-link a img {
    max-width: 29px;
    max-height: 29px;
    width: 100%;
    margin-right: 14px;
}
@media (max-width: 767px) {
    .social-icons-sm {
        padding: 16px 0;
    }
}




/* Social Media Icons -- DESKTOP
--------------------------------------------------------------------------------------------------------------------- */

.social-icons-large {
    display: none;
    position: absolute;
    top: 30vh;
    right: 0;
    z-index: 3;
    flex-direction: column;
    align-items: flex-end;
    overflow: visible;
}

.social-icons-large .social-box {
    padding: 16px;
    background: rgba(234, 234, 234, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all .2s linear;
}

.social-icons-large .social-box:hover {
    padding: 16px 26px 16px 16px;
}

.social-icons-large .social-box img {
    width: 29px;
    height: 100%;
}

/* Facebook Bereich */
.social-icons-large .social-box.fb-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 20px 0 0 0;
}

.social-icons-large .social-box.fb-wrap .fb-links {
    width: 258px;
    margin-right: -278px;
    margin-left: 20px;
    transition: all .4s ease-in-out;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.social-icons-large .social-box.fb-wrap:hover .fb-links {
    margin-right: 20px;
}

.social-icons-large .social-box.fb-wrap:hover .fb-links a:hover {
    color: var(--ba-red-600);
}

.social-icons-large .social-box.fb-wrap:hover .fb-links a span {
    position: relative;
}

.social-icons-large .social-box.fb-wrap:hover .fb-links a span::before {
    position: absolute;
    content: '';
    bottom: -20px;
    height: 0;
    width: 100%;
    background: var(--ba-red-600);
    transition: all .2s linear;
}

.social-icons-large .social-box.fb-wrap:hover .fb-links a:hover span::before {
    height: 6px;
}

.social-icons-large .social-box.fb-wrap:hover .fb-links span {
    margin: 0 5px;
}

/* Instagram Bereich */
.social-icons-large .social-box.ig-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin: 6px 0;
}

.social-icons-large .social-box.ig-wrap .ig-links {
    width: 258px;
    margin-right: -278px;
    margin-left: 20px;
    transition: all .4s ease-in-out;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.social-icons-large .social-box.ig-wrap:hover .ig-links {
    margin-right: 20px;
}

.social-icons-large .social-box.ig-wrap:hover .ig-links a:hover {
    color: var(--ba-red-600);
}

.social-icons-large .social-box.ig-wrap:hover .ig-links a span {
    position: relative;
}

.social-icons-large .social-box.ig-wrap:hover .ig-links a span::before {
    position: absolute;
    content: '';
    bottom: -20px;
    height: 0;
    width: 100%;
    background: var(--ba-red-600);
    transition: all .2s linear;
}

.social-icons-large .social-box.ig-wrap:hover .ig-links a:hover span::before {
    height: 6px;
}

.social-icons-large .social-box.ig-wrap:hover .ig-links span {
    margin: 0 5px;
}

/* Strava Bereich */
.social-icons-large .social-box.strava-wrap {
    border-radius: 0 0 0 20px;
}

@media (min-width: 992px) {
    .social-icons-large {
        display: flex;
    }
}

@media (min-width: 1300px) {
    .social-icons-large {
        position: fixed;
    }
}

/* Navbar Sub-Navigation Dropdowns (desktop)
--------------------------------------------------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar-nav > li {
        position: relative;
    }
    .navbar-nav > li > ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        background: var(--ba-white);
        min-width: 220px;
        padding: 0;
        margin: 0;
        list-style: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #d6d6d6;
    }
    /* focus-within: per Tastatur bleiben die Unterpunkte sonst display: none
       (UX-Review 2026-10-17, U5). Esc setzt .subnav-dismissed (page.js), die
       Regel steht danach und gewinnt bei gleicher Spezifitaet. */
    .navbar-nav > li:hover > ul,
    .navbar-nav > li:focus-within > ul {
        display: block;
    }
    .navbar-nav > li.subnav-dismissed > ul {
        display: none;
    }
    .navbar-nav > li > ul > li {
        border-bottom: 1px solid #eee;
    }
    .navbar-nav > li > ul > li:last-child {
        border-bottom: 0;
    }
    .navbar-nav > li > ul > li a {
        display: block;
        padding: 10px 20px;
        color: var(--ba-text);
        white-space: nowrap;
    }
    .navbar-nav > li > ul > li a:hover {
        color: var(--ba-link);
        background: var(--ba-grey-50);
        text-decoration: none;
    }
    .navbar-nav > li > ul > li.active a {
        color: var(--ba-link);
        font-weight: 600;
    }
    /* Hide nested empty uls (forum etc.) */
    .navbar-nav > li > ul > li > ul {
        display: none;
    }
    /* Dropdown arrow indicator for items with children */
    .navbar-nav > li.has-subnav > a:after {
        content: " \25BE";
        font-size: 11px;
        opacity: 0.6;
    }
}

/* Mobile Subnav Strip (xs/sm only)
--------------------------------------------------------------------------------------------------------------------- */
.navbar-menu-open .mobile-subnav {
    display: none !important;
}
/* Rundung gehoert an die Aussenkante des Kopfblocks, nicht zwischen die
   beiden buendig anliegenden Leisten. Greift nur, solange die Subnav
   tatsaechlich oben klebt (Klasse aus page.js): dann endet die Navbar
   gerade und die Subnav traegt die runde Unterkante. Im Fluss - und auf
   Seiten ohne Subnav - bleibt die Navbar-Pill rundum rund und die Subnav
   eine schlichte Leiste. */
@media (max-width: 991px) {
    body.subnav-stuck .navbar .container,
    body.subnav-stuck .navbar.affix .container {
        border-radius: 0;
    }
    body.subnav-stuck .mobile-subnav-wrap {
        border-radius: 0 0 30px 30px;
        overflow: hidden;
    }
}
.mobile-subnav-wrap {
    position: sticky;
    /* Sticky-Offset = echte Navbar-Höhe minus 1px (die Navbar sitzt auf
       top:-1px). Buendig, KEINE Luft: jeder Spalt laesst den Seiteninhalt
       zwischen Hauptnavigation und Subnav durchscrollen.
       --navbar-height wird in page.js per ResizeObserver gemessen und gesetzt.
       Fallback 132px für die Phase vor dem ersten JS-Tick. */
    top: calc(var(--navbar-height, 132px) - 2px);
    z-index: 1000;
}
.mobile-subnav-wrap::before,
.mobile-subnav-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1;
}
.mobile-subnav-wrap::before {
    left: 0;
    background: linear-gradient(to left, transparent, var(--ba-white));
    opacity: 0;
}
.mobile-subnav-wrap::after {
    right: 0;
    background: linear-gradient(to right, transparent, var(--ba-white));
}
.mobile-subnav-wrap.scrolled-start::before {
    opacity: 1;
}
.mobile-subnav-wrap.scrolled-end::after {
    opacity: 0;
}
/* Scrollbalken der beiden Nav-Streifen ausblenden: auf Touch wischt man
   ohnehin, mit Maus uebersetzt page.js das vertikale Rad ueber dem Streifen
   in horizontales Scrollen. Der Hinweis, dass rechts noch etwas kommt,
   kommt aus den Fade-Gradienten. */
.mobile-mainnav,
.mobile-subnav {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* alte Edge/IE */
}
.mobile-mainnav::-webkit-scrollbar,
.mobile-subnav::-webkit-scrollbar {
    display: none;                  /* WebKit/Blink */
}
.mobile-subnav {
    background: var(--ba-white);
    border-bottom: 1px solid #d6d6d6;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    text-align: center;
}
.mobile-subnav .nav {
    display: inline-flex;
    flex-wrap: nowrap;
    padding: 0 10px;
    margin: 0;
    list-style: none;
}
.mobile-subnav .nav li {
    display: inline-block;
    list-style: none;
    border-bottom: none;
}
.mobile-subnav .nav li a {
    display: block;
    padding: 12px 16px;
    color: var(--ba-link);
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.mobile-subnav .nav li a:hover {
    color: var(--ba-blue-600);
    text-decoration: none;
    background: none;
    opacity: 0.75;
}
.mobile-subnav .nav li.active a {
    color: var(--ba-link);
    border-bottom-color: var(--ba-blue-600);
    font-weight: 600;
}

/* Mobile Main Nav Strip (xs/sm only)
--------------------------------------------------------------------------------------------------------------------- */
.navbar-menu-open .mobile-mainnav {
    display: none !important;
}
.mobile-mainnav-wrap {
    position: relative;  /* inside the navbar container — no sticky needed */
    z-index: auto;
    clear: both;
    width: 100%;
    border-radius: 0 0 22px 22px;
    overflow: hidden;
}
.mobile-mainnav {
    background: transparent;
    border-bottom: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    text-align: left;
    /* overflow-x:auto zwingt overflow-y auf auto — der Glow der aktiven Pill
       wuerde an der Containerkante hart abgeschnitten. Padding schafft den
       Platz, der negative Margin haelt das Layout an der alten Stelle. */
    padding: 14px 0;
    margin: -14px 0 -4px;
    --pill-fade-l: 0px;
    --pill-fade-r: 28px;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        var(--ba-black) var(--pill-fade-l),
        var(--ba-black) calc(100% - var(--pill-fade-r)),
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0,
        var(--ba-black) var(--pill-fade-l),
        var(--ba-black) calc(100% - var(--pill-fade-r)),
        transparent 100%
    );
}
.mobile-mainnav-wrap.scrolled-start .mobile-mainnav { --pill-fade-l: 28px; }
.mobile-mainnav-wrap.scrolled-end   .mobile-mainnav { --pill-fade-r: 0px; }
.mobile-mainnav .nav {
    display: inline-flex;
    flex-wrap: nowrap;
    /* Links kein Padding: die erste Pill soll buendig unter der linken
       Logo-Kante beginnen. Rechts bleibt Platz fuer den Fade. */
    padding: 0 16px 0 0;
    margin: 0;
    list-style: none;
    gap: 0;
}
.mobile-mainnav .nav li {
    display: inline-block;
    list-style: none;
    border-bottom: none;
}
.mobile-mainnav .nav li a {
    /* Nur die aktive Kategorie traegt eine Pill (2026-10-17), die uebrigen
       stehen als reiner Text enger beieinander: auf 375px passen so fuenf
       statt knapp vier Punkte ohne Wischen. Transparenter Rand statt keinem, damit
       die Zeilenhoehe zur aktiven Pill passt. 400 statt 300, weil der Text
       ohne weissen Grund direkt auf dem Glas-Hintergrund steht. */
    display: block;
    padding: 7px 9px;
    color: var(--ba-red-600);
    font-size: 14px;
    white-space: nowrap;
    background: none;
    border: 1.5px solid transparent;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: 400;
}
.mobile-mainnav .nav li a:hover {
    color: var(--ba-red-600);
    text-decoration: none;
    background: none;
    opacity: 0.75;
}
.mobile-mainnav .nav li.active > a {
    padding: 7px 14px;
    color: var(--ba-text-on-brand);
    background-color: var(--ba-primary);
    border: 1.5px solid var(--ba-blue-600);
    border-radius: 20px;
    font-weight: 600;
    /* Gestaffelte Layer statt einem 12px-Schatten: ein einzelner Gaussian
       reisst am Radius sichtbar ab. Wachsender Radius bei fallender Alpha
       laeuft weich in den dunklen Hintergrund aus.
       Groesster Blur 24px = 12px Reichweite, passt in die 14px Luft, die das
       Padding am Scroll-Container laesst — sonst clippt overflow ihn wieder. */
    box-shadow:
        0 0 3px rgba(29, 92, 142, 0.40),
        0 0 8px rgba(29, 92, 142, 0.26),
        0 0 16px rgba(29, 92, 142, 0.15),
        0 0 24px rgba(29, 92, 142, 0.07);
}

/* Search result highlights */
.component-fulltext-simple mark {
    background: rgba(29, 92, 142, 0.15);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
    font-style: normal;
}

/* Back to top button */
#back-to-top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--ba-blue-600);
    color: var(--ba-text-on-brand);
    font-size: 22px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: opacity 0.3s ease, background 0.2s ease;
    padding: 0;
}
#back-to-top:hover {
    background: #215d8c;
    opacity: 0.85;
}
@media (max-width: 767px) {
    #back-to-top {
        bottom: 16px;
        right: 16px;
    }
}

/* Floating Labels (#4)
--------------------------------------------------------------------------------------------------------------------- */
.formo-input.control-group,
.formo-password.control-group,
.formo-textarea.control-group {
    position: relative;
    padding-top: 22px;
}

.formo-input > .control-label,
.formo-password > .control-label,
.formo-textarea > .control-label {
    position: absolute;
    /* senkrecht mittig im Feld: 22px Platz oben + (34px Feld - 17px Zeile) / 2 */
    top: 31px;
    left: 13px;
    font-size: 14px;
    /* grey-500 kam auf weissem Feld nur auf 2,9:1 (WCAG AA 4,5:1) */
    color: var(--ba-text-label);
    font-weight: 400;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease;
    z-index: 2;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 26px);
}

.formo-input.fl-active > .control-label,
.formo-input.fl-filled > .control-label,
.formo-password.fl-active > .control-label,
.formo-password.fl-filled > .control-label,
.formo-textarea.fl-active > .control-label,
.formo-textarea.fl-filled > .control-label {
    top: 2px;
    font-size: 11px;
    color: var(--ba-blue-600);
}

/* Dateifelder ohne Floating Label (U14, 2026-10-17): das Label lag sonst im
   Text des Feldes („Datei auswaehlen / Keine ausgewaehlt"). page.js ueberspringt
   .formo-file, hier steht das Label fest ueber dem Feld. */
.formo-input.formo-file.control-group {
    padding-top: 0;
}
.formo-input.formo-file > .control-label {
    position: static;
    display: block;
    max-width: none;
    margin-bottom: 4px;
    font-size: var(--ba-text-sm);
    white-space: normal;
}
.formo-file input[type="file"].form-control {
    height: auto;
    padding: 6px;
}

/* Fehlertext am Feld (U3, 2026-10-17), verknuepft per aria-describedby in
   formo/frontend/field_template.tpl. Ein Warnzeichen vor dem Text, damit die
   Meldung nicht nur ueber die Farbe erkennbar ist. */
.field-error {
    margin: 4px 0 0;
    font-size: var(--ba-text-sm);
    line-height: 1.4;
    color: var(--ba-error-text);
}
.field-error::before {
    content: "\26A0\FE0E\00A0";
}

/* Fokus-Ring (#14) bei Feldern mit Floating Label direkt am Rand: mit den
   ueblichen 2 px Abstand ragte er 5 px ueber das Feld und lag auf dem
   hochgerutschten Label (Befund PW 2026-10-04, Safari). Zusammen mit 22 px
   Platz oben bleiben rund 4 px zwischen Label und Ring. */
.formo-input .form-control:focus-visible,
.formo-password .form-control:focus-visible,
.formo-textarea .form-control:focus-visible {
    outline-offset: 0 !important;
}

.formo-input.fl-active .form-control,
.formo-password.fl-active .form-control,
.formo-textarea.fl-active .form-control {
    border-color: var(--ba-blue-600);
}

/* Passwort anzeigen (page.js, 2026-10-04): Auge rechts im Feld. 44 px breit
   als Tippziel; das Feld bekommt rechts Platz, damit Text nicht darunter
   laeuft. Icon als Maske, Farbe folgt dem Theme. */
/* Die 97 % der Altlast `.form-control { width: 97% }` traegt hier der
   Wrapper, sonst hinge das Auge rechts neben dem Feld (auf 375px 10px). */
.pw-field {
    position: relative;
    display: block;
    width: 97%;
}
.pw-field > .form-control {
    width: 100%;
    padding-right: 44px;
}
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.pw-toggle::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin: auto;
    background-color: var(--ba-grey-500);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pw-toggle[aria-pressed="true"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}
.pw-toggle:hover::before {
    background-color: var(--ba-blue-600);
}
/* Safari blendet bei leerem Feld einen eigenen Schluessel-Knopf ein. */
.pw-field > input::-webkit-credentials-auto-fill-button {
    margin-right: 0;
}

/* Reading progress bar (article pages) */
#reading-progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 6px;
    background: linear-gradient(to right, var(--ba-blue-600), var(--ba-blue-500));
    z-index: 1000;
    transition: width 0.08s linear;
    pointer-events: none;
}
/* Mobile (xs/sm): page.js haengt den Balken in die sticky Subnav-Leiste,
   damit er unter "Mitgliedschaft / Forum / ..." laeuft statt am unteren
   Viewport-Rand. Der Wrap ist position:sticky und damit Containing Block. */
.mobile-subnav-wrap #reading-progress-bar {
    position: absolute;
    top: auto;
    bottom: 0;
    height: 3px;
    z-index: 2; /* ueber den ::before/::after Fade-Gradienten (z-index 1) */
}

/* ============================================================
   Welle 1 — Mock-Pluspunkte aus BIKE AID Design System
   ============================================================ */

/* #2 Event-Status-Tags — farbige Pills je Kategorie-Slug
------------------------------------------------------- */
.component-event-list .item .category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #ececec;
    color: var(--ba-grey-700);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.component-event-list .item .category img {
    width: 12px;
    height: 12px;
    margin: 0;
}
.component-event-list .item .category.category-mtb            { background: #e8f3df; color: #3a6e1c; }
.component-event-list .item .category.category-pro-cycling,
.component-event-list .item .category.category-pro            { background: #fce4e3; color: var(--ba-red-600); }
.component-event-list .item .category.category-ctf-rtf,
.component-event-list .item .category.category-ctf            { background: #fdf0d4; color: #8a5f00; }
.component-event-list .item .category.category-rr,
.component-event-list .item .category.category-rennrad        { background: #e6eef6; color: var(--ba-link); }
.component-event-list .item .category.category-community      { background: #ecf3f9; color: var(--ba-link); }
.component-event-list .item .category.category-partner-mitglieder,
.component-event-list .item .category.category-partner-foerderer { background: #f1ece6; color: #6b4a00; }

/* #4 Play-Overlay — ▶-Kreis auf Video-Artikel-Teasern
------------------------------------------------------- */
.component-article-archive .image .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease;
    pointer-events: none;
    border-radius: 4px;
}
.component-article-archive .item:hover .image .play-overlay {
    background: rgba(0, 0, 0, 0.15);
}
.component-article-archive .image .play-overlay .circ {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ba-blue-900);
    font-size: 22px;
    padding-left: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* #6 Pagination-Bar — Restyle des bestehenden .pager
------------------------------------------------------- */
.component-pagination .pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
    padding: 0;
    border-top: none;
    list-style: none;
}
.component-pagination .pager li {
    display: inline-block;
    margin: 0;
}
.component-pagination .pager li > a,
.component-pagination .pager li > span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--ba-grey-300);
    border-radius: 4px;
    background: var(--ba-white);
    color: var(--ba-grey-900);
    font-size: 13px;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.component-pagination .pager li > a:hover {
    background: var(--ba-grey-50);
    color: var(--ba-blue-900);
    border-color: var(--ba-blue-600);
    text-decoration: none;
}
.component-pagination .pager li > span {
    color: var(--ba-grey-500);
    border-color: transparent;
    background: transparent;
}
.component-pagination .pager li.disabled > a,
.component-pagination .pager li.disabled > a:hover {
    opacity: 0.4;
    pointer-events: none;
    background: var(--ba-surface);
    color: var(--ba-text);
    border-color: var(--ba-border-strong);
}
.component-pagination .pager li.previous > a i,
.component-pagination .pager li.next > a i {
    font-style: normal;
}
/* Mobile: der alte .pager-Hack (Zeile ~1343, display:table-cell; width:1%)
   presst die Flex-Items sonst auf 1 % Breite - Buttons und Ergebnistext
   liefen uebereinander. Breite freigeben, Text einzeilig halten. */
@media (max-width: 480px) {
    .component-pagination .pager li {
        display: inline-block;
        width: auto;
    }
    .component-pagination .pager li > span {
        white-space: nowrap;
        font-size: 12px;
        padding: 6px 8px;
    }
    .component-pagination .pager li > a {
        padding: 6px 12px;
    }
}

/* #8 Scroll-Indicator — animierter ↓-Pfeil im Hero
------------------------------------------------------- */
.big-header .scroll-indicator {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 22px;
    z-index: 3;
    animation: bounce 2s ease infinite;
    opacity: 0.9;
    pointer-events: none;
}
.big-header .scroll-indicator svg {
    width: 100%;
    height: 100%;
    stroke: var(--ba-white);
    fill: none;
}
@keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
    .big-header .scroll-indicator { animation: none; }
}

/* #9 Member Role Badges — Mitglieds-Status-Pills
------------------------------------------------------- */
.member-roles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.role-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    background: #e6eef6;
    color: var(--ba-blue-900);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.role-badge--pro { background: var(--ba-red-600); color: var(--ba-text-on-brand); }
.role-badge--ctf { background: #f5d59a; color: #6b4a00; }
.role-badge--mtb { background: #e8f3df; color: #3a6e1c; }
/* ============================================================
   Welle 2 — Saison-Pass + Profile Pill-Tabs
   ============================================================ */
.saison-pass-wrap { padding-bottom: 30px; margin-top: 10px; }
.saison-pass {
    position: relative;
    display: grid;
    /* Dritte Spalte auf `auto`: ohne den frueheren 130px-Fortschrittsring braucht
       die Kennzahl keine feste 220px-Spalte mehr und liess sonst Leerraum stehen. */
    grid-template-columns: 140px 1fr auto;
    gap: 28px;
    align-items: center;
    background: linear-gradient(135deg, var(--ba-white) 0%, var(--ba-tint-50) 100%);
    border: 1px solid #d8e1ea;
    border-left: 6px solid var(--ba-red-600);
    border-radius: 6px;
    padding: 28px 32px;
    box-shadow: 0 2px 12px rgba(0,56,106,0.06);
    overflow: hidden;
}
.saison-pass .sp-stamp {
    position: absolute; right: -30px; top: -30px; opacity: 0.06;
    width: 240px; transform: rotate(12deg);
    pointer-events: none;
}
.saison-pass .sp-stamp img { width: 100%; height: auto; }

.sp-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-photo-disc {
    width: 110px; height: 110px; border-radius: 50%;
    background: var(--ba-blue-900); color: var(--ba-text-on-brand);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Roboto Slab', serif; font-weight: 300; font-size: 42px;
    box-shadow: 0 0 0 4px var(--ba-white), 0 0 0 6px var(--ba-red-600);
    letter-spacing: -1px;
    text-transform: uppercase;
}
.sp-photo-disc.has-img { padding: 0; overflow: hidden; background: var(--ba-white); }
.sp-photo-disc.has-img img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    display: block;
}
.sp-since { font-size: 11px; color: var(--ba-text-muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }

.sp-eyebrow { font-size: 11px; color: var(--ba-accent-text); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; }
.sp-name {
    font-family: 'Roboto Slab', serif; font-weight: 300;
    font-size: 38px; color: var(--ba-text-strong); margin: 0 0 14px;
    line-height: 1;
}
.sp-roles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-role {
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px;
    background: #e6eef6; color: var(--ba-blue-900); text-transform: uppercase; letter-spacing: 0.4px;
    display: inline-block;
}
.sp-role.pro { background: var(--ba-red-600); color: var(--ba-text-on-brand); }
.sp-meta { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12px; color: var(--ba-text-label); }
.sp-meta strong { color: var(--ba-text-strong); font-weight: 700; margin-right: 4px; }

/* Ohne den frueheren Fortschrittsring steht die Zahl im Fluss, nicht mehr
   absolut in der Ringmitte. */
.sp-stat {
    text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sp-stat-num {
    font-family: 'Roboto Slab', serif; font-weight: 200;
    font-size: 50px; color: var(--ba-accent-text); line-height: 1;
}
.sp-stat-lbl { font-size: 11px; color: var(--ba-text-label); line-height: 1.35; margin-top: 6px; font-weight: 600; }
.sp-stat-next { font-size: 11px; color: var(--ba-accent-text); font-weight: 700; margin-top: 4px; letter-spacing: 0.3px; }

@media (max-width: 767px) {
    .saison-pass { grid-template-columns: 1fr; text-align: center; padding: 22px 18px; gap: 20px; }
    .saison-pass .sp-stamp { width: 160px; right: -24px; top: -24px; }
    .saison-pass .sp-photo, .saison-pass .sp-id, .saison-pass .sp-stat { justify-content: center; align-items: center; }
    .saison-pass .sp-roles, .saison-pass .sp-meta { justify-content: center; }
    .sp-name { font-size: 30px; }
}

/* ----- Profile Pill-Tabs ----- */
.profile-tabs .pt-tabs {
    display: flex; gap: 2px; margin: 0 0 28px;
    flex-wrap: wrap;
}
/* Wie die mobile Hauptnav: nur der aktive Tab ist eine Pill, die uebrigen
   reiner Text (2026-10-17). Gleiches Padding fuer alle, weil der Wechsel
   ohne Seitenladen passiert und die Reihe sonst beim Umschalten springt. */
.profile-tabs .pt-tab {
    border: 0; cursor: pointer;
    padding: 9px 16px;
    border-radius: 999px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.3px;
    background: transparent; color: var(--ba-text-label);
    transition: background .15s, color .15s, transform .1s;
}
.profile-tabs .pt-tab:hover { background: #e2ebf3; color: var(--ba-text-strong); }
.profile-tabs .pt-tab:active { transform: scale(0.97); }
.profile-tabs .pt-tab.is-active { background: var(--ba-blue-900); color: var(--ba-text-on-brand); }
.profile-tabs .pt-panel { display: none; }
.profile-tabs .pt-panel.is-active { display: block; }
.profile-tabs .pt-lede {
    font-size: 14px; color: var(--ba-text-label); max-width: 560px;
    margin: -6px 0 28px;
}

/* ----- FAQ (Tab "Hilfe" + Einsteiger-Hinweis im Konto-Tab) ----- */
.faq-list { max-width: 720px; }
.faq-group + .faq-group { margin-top: 36px; }
.faq-group-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px; font-weight: 700; line-height: 1;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ba-red-600);
    margin: 0 0 10px;
}
.faq-item {
    border-bottom: 1px solid var(--ba-border);
    padding: 0;
}
.faq-item:first-child { border-top: 1px solid var(--ba-border); }
.faq-nudge .faq-item:last-child { border-bottom: 0; }
.faq-item > summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 34px 14px 0;
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px; font-weight: 700;
    color: var(--ba-text-strong);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: '+';
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    font-size: 20px; font-weight: 400; line-height: 1;
    color: var(--ba-blue-500);
    transition: transform .15s;
}
.faq-item[open] > summary::after { content: '–'; }
.faq-item > summary:hover { color: var(--ba-blue-500); }
.faq-answer {
    padding: 0 34px 16px 0;
    font-size: 14px; line-height: 1.6;
    color: var(--ba-text-label);
}
.faq-answer a { text-decoration: underline; }

.faq-nudge {
    position: relative;
    border: 1px solid var(--ba-border-strong);
    border-left: 3px solid var(--ba-red-600);
    background: var(--ba-surface-tint);
    padding: 22px 24px 10px;
    margin: 0 0 32px;
    border-radius: 2px;
}
.faq-nudge[hidden] { display: none; }
.faq-nudge-title {
    font-size: 18px; margin: 0 0 4px;
}
.faq-nudge-sub {
    font-size: 13px; color: var(--ba-text-label);
    margin: 0 0 14px; max-width: 520px;
}
.faq-nudge .faq-list { max-width: none; }
.faq-nudge-close {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px;
    border: 0; background: transparent;
    font-size: 22px; line-height: 1;
    color: var(--ba-text-label); cursor: pointer;
    border-radius: 50%;
}
.faq-nudge-close:hover { background: #e2ebf3; color: var(--ba-text-strong); }

/* ============================================================
   Welle 2.5 — Profile-Page-Inhalt (Benefits / Termine / Footer)
   ============================================================ */

/* ----- Konto: Pic-Placeholder neben Daten ----- */
.kontouebersicht .konto-row {
    display: flex; gap: 50px; flex-wrap: wrap; align-items: flex-start;
}
.kontouebersicht .konto-row-main { flex: 1; min-width: 280px; }
.kontouebersicht .pic-placeholder {
    width: 140px; height: 160px; background: #ecf3f9; border: 1px solid #c7dbeb;
    display: flex; align-items: center; justify-content: center;
    color: var(--ba-blue-500); font-size: 40px; font-family: 'Roboto Slab', serif; font-weight: 700;
    border-radius: 2px;
    text-transform: uppercase;
}
/* ----- Kontaktdaten: label-lose Werte-Liste ----- */
.kontouebersicht .konto-facts {
    list-style: none; padding: 0; margin: 0 0 20px;
}
.kontouebersicht .konto-facts li {
    color: var(--ba-text); font-size: 15px; line-height: 1.55; padding: 1px 0;
}
.kontouebersicht .konto-facts .kf-mail {
    font-weight: 600; color: var(--ba-text-strong);
}

/* ----- Benefits-Grid ----- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.benefit-card {
    position: relative;
    background: var(--ba-surface);
    border: 1px solid #e2ebf3;
    border-radius: 10px;
    padding: 22px 22px 18px;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color .2s, transform .15s, box-shadow .2s;
}
.benefit-card:hover { border-color: #c0d5e7; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,40,70,0.08); }
.benefit-card .bc-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #e7f4ec; color: #1a8a3a;
    font-size: 22px; font-weight: 300; line-height: 1;
}
.benefit-card.upgrade .bc-icon { background: #fff4e0; color: #b97300; }
/* Strava-Karte: Logo statt Haken bzw. Plus. */
.benefit-card .bc-icon img { width: 20px; height: 20px; display: block; }
/* Im Tab Benefits gleicher Abstand unter jedem Raster wie unter den
   Rabattcodes (.discount-grid 28px), sonst klebt die naechste Ueberschrift. */
#pt-benefits .benefits-grid,
#pt-benefits .pt-newsletter { margin-bottom: 28px; }
.benefit-card .bc-status {
    position: absolute; top: 22px; right: 22px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1a8a3a;
}
.benefit-card.upgrade .bc-status { color: #b97300; }
/* Antrag laeuft: weder gebucht (gruen) noch buchbar (orange) -- die Karte
   traegt in diesem Zustand keinen Handlungsknopf, nur den Hinweis. */
.benefit-card.pending .bc-icon { background: #eef2f6; color: #5a6b7c; }
.benefit-card.pending .bc-status { color: #5a6b7c; }
.benefit-card h3 {
    font-family: 'Roboto Slab', serif; font-weight: 400;
    font-size: 18px; line-height: 1.25; margin: 4px 0 0; color: var(--ba-text-strong);
}
.benefit-card p {
    font-size: 13px; line-height: 1.55; color: var(--ba-text-label);
    margin: 0; flex: 1;
}
.benefit-card .bc-cta {
    font-size: 12px; font-weight: 700; color: var(--ba-red-600);
    letter-spacing: 0.3px; cursor: pointer; margin-top: 6px;
    text-decoration: none;
}
.benefit-card .bc-cta:hover { color: var(--ba-blue-600); }

/* ----- Termine: Event-Cards (My Calendar) ----- */
.mc-strip {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.mc-strip.in-tab { margin-top: 8px; }
/* Kommende / Vergangene Termine (overview.tpl, UX-Review U9) */
.mc-group-title {
    margin: 22px 0 4px;
    font-size: var(--ba-text-lg);
    font-weight: var(--ba-weight-bold);
}
.mc-card {
    position: relative;
    background: var(--ba-surface); border: 1px solid #e3e9ef; border-radius: 4px;
    padding: 14px 14px 12px; display: flex; gap: 12px;
    text-decoration: none; transition: box-shadow .15s, transform .15s;
    color: inherit;
}
.mc-card:hover { box-shadow: 0 4px 14px rgba(0,56,106,0.1); transform: translateY(-2px); text-decoration: none; }
.mc-card.next { border-color: var(--ba-red-600); border-width: 2px; }

.mc-date {
    flex: 0 0 auto; width: 50px; text-align: center;
    background: var(--ba-tint-50); border-radius: 3px; padding: 6px 0;
    display: flex; flex-direction: column; gap: 0;
}
.mc-card.next .mc-date { background: var(--ba-red-600); color: var(--ba-text-on-brand); }
.mc-date .d { font-family: 'Roboto Slab', serif; font-weight: 300; font-size: 24px; line-height: 1; color: var(--ba-text-strong); }
.mc-date .m { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; color: var(--ba-text-muted); margin-top: 2px; }
.mc-card.next .mc-date .d, .mc-card.next .mc-date .m { color: var(--ba-text-on-brand); }

.mc-body { flex: 1; min-width: 0; }
.mc-tag {
    display: inline-block; font-size: 9px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    padding: 2px 6px; border-radius: 2px; margin-bottom: 4px;
}
.mc-tag.pro { background: var(--ba-red-600); color: var(--ba-text-on-brand); }
.mc-tag.ctf { background: var(--ba-gold-500); color: #5a4400; }
.mc-tag.mtb { background: var(--ba-blue-500); color: var(--ba-text-on-brand); }

.mc-body h3 {
    font-family: 'Open Sans', sans-serif; font-weight: 700;
    font-size: 13px; color: var(--ba-text-strong); margin: 0 0 6px; line-height: 1.3;
}
.mc-loc { font-size: 11px; color: var(--ba-text-muted); display: flex; gap: 4px; align-items: center; margin-bottom: 6px; }
.mc-loc svg { width: 11px; height: 11px; flex: 0 0 auto; }

.mc-status { font-size: 11px; color: var(--ba-text-label); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.mc-status .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.mc-status .dot.ok { background: #1a8a3a; }
.mc-status .dot.wait { background: var(--ba-gold-500); }

.mc-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.mc-act {
    font-size: 10px; font-weight: 700; padding: 4px 7px; border-radius: 2px;
    background: var(--ba-tint-50); color: var(--ba-blue-900); cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.4px;
    text-decoration: none;
}
.mc-act.primary { background: var(--ba-blue-900); color: var(--ba-text-on-brand); }
.mc-act.danger { background: transparent; color: var(--ba-red-600); }
.mc-act:hover { filter: brightness(0.95); text-decoration: none; }

.mc-card.add {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: transparent; border: 2px dashed var(--ba-border-strong); color: var(--ba-text-muted);
    text-align: center; padding: 18px;
}
.mc-card.add:hover { border-color: var(--ba-link-hover); color: var(--ba-link-hover); transform: none; box-shadow: none; }
.mc-add-icon { font-size: 36px; line-height: 1; font-weight: 200; margin-bottom: 6px; }
.mc-add-text { font-size: 12px; font-weight: 700; }
.mc-add-sub { font-size: 11px; margin-top: 2px; opacity: 0.7; }

/* ----- QR-Ticket-Teaser pro Event-Karte (Account → Termine) ----- */
.mc-status .dot { background: #c2ccd6; }
.mc-card.is-past { opacity: 0.62; }
.mc-card.is-past:hover { transform: none; box-shadow: none; }
.mc-ticket {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0 10px; padding: 8px;
    border: 1px solid #e3e8ee; border-radius: 8px;
    background: #f7f9fb; text-decoration: none;
}
.mc-ticket:hover { border-color: var(--ba-blue-900); background: #eef3f8; text-decoration: none; }
.mc-qr {
    width: 76px; height: 76px; flex: 0 0 auto; display: block;
    background: var(--ba-white); padding: 4px; border-radius: 4px; border: 1px solid #eef1f5;
}
.mc-ticket-cta {
    font-size: 12px; font-weight: 700; color: var(--ba-blue-900);
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.mc-ticket-arrow { font-size: 15px; line-height: 1; }

/* ----- Profile-Footer: Aktivität + Impact ----- */
.profile-footer {
    display: grid; grid-template-columns: 1fr;
    gap: 18px; margin-top: 36px;
}
.el-card {
    background: var(--ba-surface); border: 1px solid #e3e9ef; border-radius: 4px;
    padding: 22px 24px;
}
.el-title {
    font-family: 'Roboto Slab', serif; font-weight: 300;
    font-size: 20px; color: var(--ba-text-strong); margin: 0 0 16px;
    padding-bottom: 10px; border-bottom: 2px solid var(--ba-red-600);
    display: inline-block;
}
.impact-num {
    font-family: 'Roboto Slab', serif; font-weight: 200;
    font-size: 64px; color: var(--ba-accent-text); line-height: 1;
    letter-spacing: -2px;
}
.impact-sub { font-size: 12px; color: var(--ba-text-muted); font-weight: 600; }
.pt-note { font-size: 12px; color: var(--ba-text-muted); margin-top: 16px; }

/* ----- Welle-2.5 Responsive ----- */
@media (max-width: 991px) {
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .profile-footer { grid-template-columns: 1fr; }
    .kontouebersicht .konto-row { gap: 24px; }
    .kontouebersicht .konto-row-aside { width: 100%; display: flex; justify-content: center; }
}
@media (max-width: 600px) {
    .benefits-grid { grid-template-columns: 1fr; }
    .mc-strip { grid-template-columns: 1fr; }
}

/* ----- Einstieg zur QR-Flaeche auf dem Saison-Pass (oben rechts) -----
   Hiess bis 2026-07-29 .sp-pdf und fuehrte auf einen href="#". Es gibt bewusst
   keinen PDF-Download fuer den Pass: er entsteht nur durch einen Seitenaufruf
   und ist damit immer der Token der laufenden Saison. Das Offline-Druckstueck
   ist das Event-Ticket aus der Mail. */
.sp-qr-link {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    min-height: 38px; border-radius: 19px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 14px 0 11px;
    background: var(--ba-white); color: var(--ba-blue-900);
    border: 1px solid #d8e1ea;
    box-shadow: 0 1px 4px rgba(0,56,106,0.10);
    transition: all 0.18s ease-in-out;
    text-decoration: none;
    font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.sp-qr-link svg { width: 19px; height: 19px; display: block; flex: 0 0 auto; }
.sp-qr-link:hover, .sp-qr-link:focus {
    background: var(--ba-blue-900); color: var(--ba-text-on-brand); border-color: var(--ba-blue-900);
    text-decoration: none;
}
@media (max-width: 767px) {
    /* Auf schmalen Schirmen wandert der Knopf unter den Kartenkopf: oben rechts
       sitzt dort der Logo-Stempel, und die Karte ist einspaltig zentriert. */
    .sp-qr-link { position: static; margin: 0 auto 4px; }
}

/* ============================================================
   Welle 2.5 Fix — Profile-Page Layout
   - zieht Inhalts-Spalte auf volle Breite (Sidebar versteckt)
   - Kopf seit 2026-10-17 schmal wie auf allen Kontoseiten
     (Helper_Page_Header, is-plain), ohne Cartoon und Scroll-Pfeil
   ============================================================ */
.l-sub:has(.component-account-overview) .l-content .col-md-8,
.l-sub:has(.component-account-overview) .l-content .col-lg-8 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.l-sub:has(.component-account-overview) .l-content .col-lg-1,
.l-sub:has(.component-account-overview) .l-content .sidebar {
    display: none;
}
.component-account-overview {
    max-width: 1100px;
    margin: 0 auto;
}

/* ============================================================
   Social-Media-Strip auf Startseite (Helper_Socialmedia_Feed)
   ============================================================ */
.social-strip {
    margin: 30px 0 24px;
    width: 100%;
}
.social-strip__rail {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 4px 10px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 14px;
}
.social-strip__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ba-blue-600);
}
.social-strip__cta {
    font-size: 12px;
    color: #d62976;
    text-decoration: none;
}
.social-strip__cta:hover {
    color: #962fbf;
    text-decoration: underline;
}

/* Sidewinder = horizontal scroll */
.social-strip--sidewinder .social-strip__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.social-strip--sidewinder .sp-card {
    scroll-snap-align: start;
}
.social-strip--sidewinder .social-strip__grid::-webkit-scrollbar {
    height: 6px;
}
.social-strip--sidewinder .social-strip__grid::-webkit-scrollbar-thumb {
    background: var(--ba-grey-300);
    border-radius: 3px;
}

/* Inline = 3er-Reihe wie ein .col-md-4-Grid */
.social-strip--inline .social-strip__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 991px) {
    .social-strip--inline .social-strip__grid {
        grid-template-columns: 1fr;
    }
}

/* Social-Hub: Sparten-Filter als Pill-Toggles */
.social-hub__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 24px;
}
.social-hub__pill {
    display: inline-block;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ba-red-600);
    background: var(--ba-surface);
    border: 1.5px solid var(--ba-grey-300);
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.social-hub__pill:hover { opacity: 0.75; }
.social-hub__pill.is-active {
    color: var(--ba-text-on-brand);
    background-color: var(--ba-primary);
    border-color: var(--ba-primary);
    font-weight: 600;
}
.social-hub__pill--all { font-weight: 600; }
.social-hub__pill--all.is-active {
    background-color: var(--ba-blue-900);
    border-color: var(--ba-blue-900);
}
@media (max-width: 767px) {
    .social-hub__filter { gap: 5px; margin-bottom: 18px; }
    .social-hub__pill { font-size: 12px; padding: 6px 12px; }
}

/* Component_Social_Strip: ein Channel als Karussell auf beliebiger Seite
   (Team-Landingpages). Nutzt strip.tpl, hier nur Wrapper-Feinheiten. */
.social-strip-section {
    margin: 40px 0 10px;
}
.social-strip-section__title {
    font-size: 26px;
    margin: 0 0 14px;
    color: var(--ba-blue-900);
}
.social-strip-section__more {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 700;
}

/* Karten */
.sp-card {
    display: flex;
    flex-direction: column;
    background: var(--ba-white);
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-width: 0;
}
.sp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: #dcdcdc;
    text-decoration: none;
}

.sp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.sp-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ba-grey-100);
    flex-shrink: 0;
}
.sp-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.sp-handle {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-meta {
    font-size: 11px;
    color: var(--ba-text-subtle);
}
.sp-platform-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.sp-platform-tag--instagram {
    background: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5);
    color: var(--ba-text-on-brand);
}
.sp-platform-tag--facebook {
    background: #1877f2;
    color: var(--ba-text-on-brand);
}

.sp-media {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: var(--ba-surface-2);
}
.sp-facebook .sp-media {
    aspect-ratio: 16 / 10;
}
.sp-media--text {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-grad-instagram {
    background: linear-gradient(135deg, #feda75 0%, #fa7e1e 30%, #d62976 60%, #962fbf 100%);
}
.sp-grad-facebook {
    background: linear-gradient(135deg, #1877f2 0%, #0a4ea8 100%);
}
.sp-quote-mark {
    font-family: Georgia, serif;
    font-size: 80px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
    margin-top: -12px;
}

.sp-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.sp-caption {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ba-grey-900);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #777;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid #f3f3f3;
}
.sp-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
/* Platform-Icon (Facebook/Instagram) — inline in der Meta-Zeile, links vom Datum. */
.sp-meta {
    display: flex;
    align-items: center;
    gap: 5px;
}
.sp-platform-icon {
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .social-strip {
        margin: 20px 0 14px;
    }
    .social-strip--sidewinder .social-strip__grid {
        grid-auto-columns: minmax(200px, 75%);
        margin: 0 -15px;
        padding: 0 15px 8px;
    }
    .social-strip__rail {
        padding: 0 0 8px;
        border-bottom: none;
        margin-bottom: 8px;
    }
    .social-strip__label {
        font-family: 'Roboto Slab', serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: normal;
        text-transform: none;
        color: var(--ba-blue-900);
    }
}

/* Team-Roster (Racing Riders) -- Grundregeln der frueheren Trading Cards. Die Zeilenliste weiter unten
   ("Roster als Zeilenliste") ueberschreibt Raster, Karte und Bild; Farben, Badges und Detailseite gelten weiter.
--------------------------------------------------------------------------------------------------------------------- */
.team-roster-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.team-roster-col {
    padding: 10px;
    display: flex;
}
.team-roster-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--ba-white);
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.team-roster-card:hover,
.team-roster-card:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}
.team-roster-card-archived {
    opacity: 0.7;
}
/* Karte ohne Default-Page: kein Link, also auch kein Hover-Lift und kein
   Zeiger-Cursor -- sonst verspricht die Karte einen Klick, der nichts tut. */
.team-roster-card-unlinked {
    cursor: default;
}
.team-roster-card-unlinked:hover,
.team-roster-card-unlinked:focus {
    transform: none;
    box-shadow: none;
}
.team-roster-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f0f2f5;
}
.team-roster-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Oben ausrichten, nicht mittig: die Fahrer-Portraits sind hochkant, ein
       zentrierter 1:1-Ausschnitt zeigt das Trikot statt des Gesichts. */
    object-position: 50% 0;
    display: block;
}
.team-roster-card-body {
    padding: 14px 16px 16px;
}
.team-roster-card-name {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.25;
    color: var(--ba-blue-900);
}
.team-roster-card-meta {
    margin-bottom: 10px;
}
.team-roster-card-city {
    margin: 0 0 4px;
    color: var(--ba-grey-700);
    font-size: 13px;
    line-height: 1.4;
}
/* Funktionsbezeichnung ("Sportlicher Leiter") auf Betreuer-Karten -- etwas
   kraeftiger als der Wohnort, weil sie dort die Hauptinformation ist. */
.team-roster-card-position {
    margin: 0 0 4px;
    color: var(--ba-grey-900);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.team-roster-card-bio {
    margin: 0;
    color: var(--ba-grey-700);
    font-size: 13px;
    line-height: 1.5;
}
.team-roster-badge {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--ba-blue-900);
    color: var(--ba-text-on-brand);
    border-radius: 3px;
}
.team-roster-badge-discipline { background: var(--ba-blue-900); }
.team-roster-badge-season     { background: #6c757d; }
.team-roster-badge-nat        { background: #495057; }
.team-roster-badge-club       { background: #6c757d; }
/* Betreuer-Badge in Vereinsrot -- unterscheidet Staff auf einen Blick von den
   Disziplin-Badges der Fahrer (Team-Bereiche 2026-08). */
.team-roster-badge-staff      { background: var(--ba-red-600); }
.team-roster-pagination {
    margin-top: 24px;
    text-align: center;
}

/* Redaktionelle Tabellen in Text-Komponenten (z. B. Rennkalender der
   Team-Bereiche): CKEditor liefert nacktes <table> ohne Klassen, ohne dieses
   Styling kleben die Spalten aneinander. */
.component-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 20px;
    font-size: 14px;
}
.component-text table th {
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
    background: var(--ba-blue-900);
    color: var(--ba-text-on-brand);
    padding: 9px 14px;
}
.component-text table td {
    padding: 9px 14px;
    border-top: 1px solid #e3e3e3;
    font-variant-numeric: tabular-nums;
}
.component-text table tbody tr:nth-child(even) {
    background: #f4f7fa;
}

/* Teams-Hub: 3 Kacheln (Pro / Development / MTB) auf /teams.
   Markup liegt als HTML in einer Component_Text (Seite 330), die Klassen
   kommen aus dem Team-Bereiche-Entwurf 2026-08. Statisches Kachel-Grid,
   bewusst kein Karussell: bei drei Kacheln gibt es nichts zu sliden. */
.teams-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 10px 0 30px;
}
.teams-hub-tile {
    display: flex;
    flex-direction: column;
    background: var(--ba-white);
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.teams-hub-tile:hover,
.teams-hub-tile:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: inherit;
}
.teams-hub-tile-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f0f2f5;
}
.teams-hub-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}
.teams-hub-tile:hover .teams-hub-tile-image img {
    transform: scale(1.05);
}
.teams-hub-tile-body {
    display: block;
    padding: 16px 18px 18px;
    background: #ecf3f9;
    flex: 1;
}
.teams-hub-tile-body strong {
    display: block;
    margin: 0 0 6px;
    font-family: "Roboto Slab", Georgia, serif;
    font-weight: 400;
    font-size: 21px;
    color: var(--ba-blue-900);
}
.teams-hub-tile-text {
    display: block;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ba-grey-700);
}
.teams-hub-tile-cta {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ba-red-600);
}
.teams-hub-tile:hover .teams-hub-tile-cta {
    color: var(--ba-blue-600);
}

/* Team-Roster Detail
------------------------------------ */
.team-roster-detail-header {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
}
.team-roster-detail-image {
    flex: 0 0 240px;
    max-width: 240px;
}
.team-roster-detail-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}
.team-roster-detail-headline {
    flex: 1 1 300px;
}
.team-roster-detail-headline h1 {
    margin-top: 0;
}
.team-roster-detail-meta {
    margin: 8px 0 14px;
}
.team-roster-detail-bio {
    color: var(--ba-grey-700);
    line-height: 1.6;
}
.team-roster-detail-block {
    background: #fafbfc;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.team-roster-detail-block h2 {
    margin-top: 0;
    font-size: 18px;
    color: var(--ba-blue-900);
}
/* Steckbrief-Kacheln (Optik aus dem Team-Bereiche-Entwurf 2026-08; ersetzen
   die frueheren dl-Karten "Persoenliches"/"Sportliches" in show.tpl). */
.team-roster-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    max-width: 720px;
    margin: 0 0 24px;
}
.team-roster-stat {
    background: #fafbfc;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 12px 14px;
}
.team-roster-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ba-grey-700);
}
.team-roster-stat-value {
    font-size: 17px;
    font-family: "Roboto Slab", Georgia, serif;
    font-weight: 400;
    color: var(--ba-blue-900);
    line-height: 1.4;
}
.team-roster-detail-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.team-roster-detail-links li a {
    display: inline-block;
    padding: 6px 12px;
    background: var(--ba-blue-900);
    color: var(--ba-text-on-brand);
    border-radius: 3px;
    text-decoration: none;
    font-size: 13px;
}
.team-roster-detail-links li a:hover,
.team-roster-detail-links li a:focus {
    background: #002a52;
    color: var(--ba-text-on-brand);
    text-decoration: none;
}
.team-roster-detail-pictures {
    margin-top: 24px;
}
.team-roster-detail-pictures img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    margin-bottom: 16px;
}

/* ============================================================
   Welle 2.3 — Mitglieder-Verzeichnis (Tabelle) + Profileinstellungen
   ============================================================ */

/* ----- Verzeichnis: Tabelle statt Karten -----
   Das Verzeichnis ist ein Werkzeug zum Mitfahrer-Finden. Da zaehlt, dass man
   viele Zeilen ueberfliegen und vergleichen kann -- nicht Bildflaeche. */
.component-biker-list .bl-lede {
    color: var(--ba-text-muted);
    font-size: var(--ba-text-sm);
    margin-bottom: var(--ba-space-lg);
}
.biker-table-wrap { margin-top: var(--ba-space-lg); }
.biker-table { width: 100%; }
.biker-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ba-slate-500);
    border-bottom: 2px solid var(--ba-border);
    white-space: nowrap;
}
.biker-table td { vertical-align: middle; }
.biker-table tbody tr:hover { background: var(--ba-surface-tint); }

.biker-table .bt-link {
    display: flex;
    align-items: center;
    gap: var(--ba-space-sm);
    text-decoration: none;
    color: inherit;
}
.biker-table .bt-link:hover { text-decoration: none; }
.biker-table .bt-avatar {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ba-grey-100);
    display: block;
}
.biker-table .bt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biker-table .bt-avatar--none { box-shadow: inset 0 0 0 1px var(--ba-border); }
.biker-table .bt-names { display: flex; flex-direction: column; line-height: 1.3; }
.biker-table .bt-names strong { color: var(--ba-blue-900); }
.biker-table .bt-realname { font-size: 12px; color: var(--ba-text-muted); }
.biker-table .bt-setup {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--ba-slate-600);
}

/* Disziplin- und Tages-Marken. Auch auf der Detailseite benutzt. */
.bt-tag, .bt-day {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--ba-radius-pill);
    margin: 0 4px 3px 0;
    white-space: nowrap;
}
.bt-tag { background: #e6eef6; color: var(--ba-blue-900); }
.bt-day { background: var(--ba-grey-100); color: var(--ba-slate-600); min-width: 30px; text-align: center; }

.biker-table .bt-region,
.biker-table .bt-club { font-size: 13px; color: var(--ba-text); }
/* Beitrittsjahr: eine vierstellige Zahl, die nur beim Vergleichen ueber Zeilen
   hinweg etwas sagt -- deshalb Tabellenziffern und rechtsbuendig. */
.biker-table .bt-since {
    font-size: 13px;
    color: var(--ba-text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
/* Ziele stehen in der Namensspalte, nicht in einer eigenen: Freitext hat keine
   Spaltenbreite. Eine Zeile, danach Ellipse -- der ganze Text im Profil. */
.biker-table .bt-goals {
    font-size: 12px;
    color: var(--ba-text-muted);
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* Verein raus, bevor die Tabelle scrollt: die Disziplin ist die Angabe, nach
       der man sucht, der Verein die am ehesten verzichtbare. Beitrittsjahr und
       Ziel-Anriss aus demselben Grund -- beides ist Beiwerk zur Person und steht
       vollstaendig auf der Profilseite. */
    .biker-table .bt-club, .biker-table thead th.bt-club,
    .biker-table .bt-since, .biker-table thead th.bt-since { display: none; }
    .biker-table .bt-goals { display: none; }
}

.bd-setup { color: var(--ba-text); }
.bd-goals { color: var(--ba-text); }

/* ----- Profileinstellungen: Feldgruppen ----- */
.component-profile-settings .ps-block {
    border: 0;
    margin: 0 0 var(--ba-space-xl);
    padding: 0;
}
.component-profile-settings .ps-block legend {
    font-family: var(--ba-font-heading);
    font-weight: var(--ba-weight-light);
    font-size: 20px;
    color: var(--ba-blue-900);
    border: 0;
    border-bottom: 2px solid var(--ba-red-600);
    display: inline-block;
    width: auto;
    padding-bottom: 8px;
    margin-bottom: var(--ba-space-md);
}
.component-profile-settings .ps-hint {
    color: var(--ba-text-muted);
    font-size: var(--ba-text-sm);
    margin-bottom: var(--ba-space-md);
}
/* Mehrfachauswahlen. Formo rendert:
     .formo-checkboxes > label.control-label + .controls > label > input + span
   Nebeneinander statt untereinander -- sieben Wochentage in einer Spalte sind
   eine Wand. */
.component-profile-settings .ps-choices { margin-bottom: var(--ba-space-md); }
.component-profile-settings .ps-choices .control-label {
    display: block;
    font-weight: var(--ba-weight-bold);
    margin-bottom: 6px;
}
.component-profile-settings .ps-choices .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
}
.component-profile-settings .ps-choices .controls label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--ba-weight-regular);
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}
.component-profile-settings .ps-choices .controls input[type="checkbox"] { margin: 0; }
.component-profile-settings .ps-choices--days .controls { gap: 6px 14px; }

/* ----- Profileinstellungen: Hauptschalter ----- */
/* is_public entscheidet ueber die vier Schalter darunter. Als gleich
   aussehende erste Listenzeile war das nicht abzulesen. */
.component-profile-settings .ps-master {
    background: var(--ba-surface-tint);
    border-left: 3px solid var(--ba-red-600);
    padding: 14px 16px;
    margin-bottom: var(--ba-space-md);
}
.component-profile-settings .ps-master .control-group.checkbox { margin: 0; }
.component-profile-settings .ps-master .control-label {
    font-weight: var(--ba-weight-bold);
    font-size: 16px;
    color: var(--ba-blue-900);
}
.component-profile-settings .ps-master-note {
    margin: 6px 0 0 25px;   /* 25px = das padding-left der Checkbox-Labels */
    color: var(--ba-text-muted);
    font-size: var(--ba-text-sm);
}
/* Die untergeordneten Schalter ruecken ein und haengen an einer Linie -- sie
   gehoeren sichtbar unter den Hauptschalter, nicht neben ihn. */
.component-profile-settings .ps-subs {
    padding-left: 16px;
    border-left: 1px solid var(--ba-border);
    transition: opacity .2s ease;
}
/* Nur gedimmt, nicht deaktiviert: siehe Kommentar in settings.tpl. */
.component-profile-settings .ps-subs.is-inactive { opacity: .55; }
/* "Nur Vorname" haengt an "Vor- und Nachname zeigen" und rueckt deshalb noch
   einmal ein -- gleiche Linie wie .ps-subs, eine Stufe tiefer. */
.component-profile-settings .ps-name-detail {
    padding-left: 16px;
    margin: 2px 0 8px 9px;   /* 9px + 16px = 25px, die Kante der Checkbox-Labels darueber */
    border-left: 1px solid var(--ba-border);
}
/* Eingeklappt heisst wirklich weg -- ausgeblendet und aus der Tab-Reihenfolge,
   aber weiter im DOM und damit im POST (siehe settings.tjs). Ohne JS greift die
   Klasse nie, dann steht die Zeile dauerhaft da. */
.component-profile-settings .ps-name-detail.is-collapsed { display: none; }
.component-profile-settings .ps-name-detail .control-group.checkbox { margin: 0; }

/* ----- Profileinstellungen: Profilbild ----- */
/* Gespeicherter Ausschnitt klein statt offener Cropper (U13, 2026-10-17). */
.component-profile-settings .ps-image-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ba-space-md);
    margin-bottom: var(--ba-space-md);
}
.component-profile-settings .ps-image-preview img {
    display: block;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1px solid var(--ba-border);
}
.component-profile-settings .ps-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.component-profile-settings .ps-image-actions .btn {
    width: auto;
    margin: 0;
}
/* settings.tjs blendet per hidden-Attribut aus; display aus den Regeln oben
   und aus .btn wuerde es sonst ueberstimmen. */
.component-profile-settings .ps-image-current[hidden],
.component-profile-settings .ps-image-actions .btn[hidden] {
    display: none;
}

/* ----- Profileinstellungen: mitlaufende Speichern-Leiste ----- */
.component-profile-settings .ps-savebar-sentinel { height: 1px; }
.component-profile-settings .ps-savebar {
    position: sticky;
    bottom: 0;
    /* Ueber .btn-default (z-index 100): „Bild auswählen" schob sich sonst beim
       Scrollen ueber die Leiste (U13, 2026-10-17). */
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ba-space-md);
    margin-top: var(--ba-space-md);
    padding: 12px 0;
    background: var(--ba-surface);
    border-top: 1px solid var(--ba-border);
}
/* Schatten nur, solange die Leiste wirklich klebt -- an ihrem Endplatz unter
   dem letzten Feld waere er ein Strich ohne Anlass. */
.component-profile-settings .ps-savebar.is-stuck {
    box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.08);
}
.component-profile-settings .ps-savebar-note {
    color: var(--ba-text-muted);
    font-size: var(--ba-text-sm);
    line-height: 1.3;
}
.component-profile-settings .ps-savebar .submit { margin: 0; flex: 0 0 auto; }
/* Rueckweg links, Speichern rechts: `margin-right: auto` loest den Link aus der
   rechtsbuendigen Gruppe, damit er nicht neben dem Speichern-Button klebt und
   versehentlich getroffen wird. */
.component-profile-settings .ps-savebar-back {
    margin-right: auto;
    flex: 0 0 auto;
    font-size: var(--ba-text-sm);
}

@media (max-width: 767px) {
    /* #back-to-top sitzt fix auf bottom/right 16px und ist 44px breit; ohne
       diese Reserve liegt es genau auf dem Speichern-Button. Links 12px statt
       0 und ein Ruecklink, der schrumpfen und umbrechen darf: vorher begann
       „Zurück zur Kontoübersicht" am Bildschirmrand (U13, 2026-10-17). */
    .component-profile-settings .ps-savebar { padding: 8px 60px 8px 12px; gap: 12px; }
    .component-profile-settings .ps-savebar-back {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.3;
    }
    .component-profile-settings .ps-savebar .btn.btn-submit {
        width: auto;
        padding: 10px 18px;
        white-space: nowrap;
    }
    /* Auf kleinen Schirmen frisst die Leiste sonst zu viel Hoehe -- der Button
       allein sagt schon, was er tut. */
    .component-profile-settings .ps-savebar-note { display: none; }
}

/* ----- Profileinstellungen: Feldhinweise als Fragezeichen ----- */
/* Die Erklaerungen standen als Fliesstext unter jedem Feld und machten das
   Formular fast doppelt so lang, obwohl man sie genau einmal liest. Jetzt
   stecken sie in einem Popover -- gleicher Mechanismus wie `.opt-help` im
   Mitgliedsantrag, andere Optik (graue Fuellung statt Konturkreis). */
.component-profile-settings .ps-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ba-grey-100);
    color: var(--ba-slate-600);
    font-size: 11px;
    font-weight: var(--ba-weight-bold);
    line-height: 1;
    text-decoration: none;
    cursor: help;
    transition: background .15s ease, color .15s ease;
}
.component-profile-settings .ps-help:hover,
.component-profile-settings .ps-help:focus {
    background: var(--ba-blue-600);
    color: var(--ba-text-on-brand);
    text-decoration: none;
}
/* Am Feld haengt es oben rechts -- spiegelbildlich zum Floating Label, das
   links in derselben Zeile sitzt. `position: relative` auf die Gruppe, die
   steht sonst auf static.
   top: 18px ist der Abstand von der Gruppen- zur Feldoberkante. Gemessen, nicht
   geraten: er liegt bei Text-Input und Textarea gleich und aendert sich mit der
   Viewport-Breite nicht (geprueft bei 1200px und 375px).
   .ps-field markiert die Gruppen mit Fragezeichen -- nur dort braucht das Feld
   rechts Platz. Das Feld ist wegen der Altlast `.form-control { width: 97% }`
   schmaler als die Gruppe; auf breiten Schirmen liegt das Fragezeichen komplett
   in dieser Luecke, auf schmalen (dort sind es nur ~10px) ragt es ueber die
   Feldecke. Deshalb zusaetzlich padding-right, damit der Text nie darunter
   laeuft. */
.component-profile-settings .form-group { position: relative; }
.component-profile-settings .ps-field > .ps-help {
    position: absolute;
    top: 18px;
    right: 0;
    z-index: 2;
}
.component-profile-settings .ps-field .form-control { padding-right: 26px; }
/* In einer Checkbox-Zeile ist oben rechts kein Platz -- dort laeuft es im
   Textfluss mit. */
.component-profile-settings .ps-help--inline {
    position: static;
    margin-left: 4px;
    vertical-align: middle;
}
/* Checkbox-Zeile mit Fragezeichen. Ohne flex faellt das Fragezeichen auf die
   naechste Zeile: `.formo-checkbox` steht weiter oben in dieser Datei auf
   width:100% und ist damit blockbreit. Die absolut gesetzte Checkbox (Bootstrap
   positioniert sie gegen `.checkbox`) bleibt davon unberuehrt, sie ist aus dem
   Fluss. */
.component-profile-settings .ps-check {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.component-profile-settings .ps-check > .field { width: auto; }
.component-profile-settings .ps-inline-note {
    display: block;
    margin: 2px 0 0 25px;   /* 25px = das padding-left der Checkbox-Labels */
    color: var(--ba-text-muted);
    font-size: var(--ba-text-sm);
}
.component-profile-settings .ps-inline-note strong { color: var(--ba-text); }


/* Mitgliedsantrag (2026-08-01)
----------------------------------------------------------------------------------------------------------------------
   Verdichtung und buendige Feldkanten. Bewusst auf die Komponente begrenzt --
   Registrierung, Profileinstellungen und Passwortformular behalten ihr Layout. */

.component-biker-member-application h2 {
    font-size: 18px;
    margin: 26px 0 12px;
    padding-top: 14px;
    border-top: 1px solid #e5e5e5;
    letter-spacing: .01em;
}
.component-biker-member-application h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.component-biker-member-application .form-group { margin-bottom: 10px; }

/* Zweispaltiges Raster. align-items:start ersetzt .wide/.small, die als
   inline-block ohne vertical-align an der Textbasislinie hingen -- sobald ein
   Nachbarfeld sein Floating-Label hob, sass das Feld daneben tiefer. */
.component-biker-member-application .fld-row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    align-items: start;
}
.component-biker-member-application .fld-row > * { min-width: 0; }
.component-biker-member-application .fld-2   { grid-template-columns: 1fr 1fr; }
.component-biker-member-application .fld-3-1 { grid-template-columns: 3fr 1fr; }
.component-biker-member-application .fld-1-3 { grid-template-columns: 1fr 3fr; }

@media (max-width: 600px) {
    .component-biker-member-application .fld-row { grid-template-columns: 1fr; }
}

/* Zwei Altlasten weiter oben in dieser Datei machen das Feld schmaler als
   seine Zelle und hinterlassen eine breite Luecke rechts daneben:
     .component-form .control-group { width: 49% }  -- Zweispalten-Hack, nur
        innerhalb .form-group per 100% neutralisiert
     .form-control { width: 97% }
   Im Raster gibt die Spalte die Breite vor, das Feld fuellt sie ganz. */
.component-biker-member-application .fld-row > .control-group { width: 100%; }
.component-biker-member-application .form-control { width: 100%; }

.component-biker-member-application .form-control {
    height: 44px;
    line-height: 1.4;
}
.component-biker-member-application textarea.form-control { height: auto; }
.component-biker-member-application .control-group { margin-bottom: 0; }

/* Selects in dieselbe Floating-Label-Struktur holen. Weiter oben bekommen nur
   .formo-input/.formo-password/.formo-textarea das padding-top:18px fuer den
   Labelstreifen; ein .formo-select war dadurch 18px niedriger als ein Input
   daneben. Ein Select hat immer einen Wert, sein Label sitzt also fest oben. */
.component-biker-member-application .formo-select.control-group {
    position: relative;
    padding-top: 18px;
}
.component-biker-member-application .formo-select > .control-label {
    position: absolute;
    top: 3px;
    left: 13px;
    z-index: 2;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: var(--ba-weight-regular);
    color: #1d5c8e;
    pointer-events: none;
}

/* Hilfe-Knopf inline hinter dem Feld statt absolut positioniert.
   .btn-info steht weiter oben auf position:absolute; top:0; right:20px und
   liegt damit ueber dem Feldinhalt. */
.component-biker-member-application .fld-help-wrap { position: relative; }
.component-biker-member-application .opt-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 11px;
    line-height: 1;
    font-weight: var(--ba-weight-bold);
    opacity: .65;
    cursor: help;
    vertical-align: middle;
    text-decoration: none;
}
.component-biker-member-application .opt-help:hover,
.component-biker-member-application .opt-help:focus { opacity: 1; }
.component-biker-member-application .fld-help-wrap .opt-help {
    position: absolute;
    top: 0;
    right: 0;
}

/* Mitgliedschafts-Optionen als Karten */
.component-biker-member-application .formo-radios .controls {
    display: grid;
    gap: 8px;
    margin: 4px 0 12px;
}
.component-biker-member-application .formo-radios label.radio {
    display: block;
    position: relative;
    /* margin-left:20px steht weiter oben global auf label.radio und wuerde die
       Karte einruecken statt den Knopf. */
    margin: 0;
    padding: 12px 14px 12px 40px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.component-biker-member-application .formo-radios label.radio:hover { border-color: #4789be; }
.component-biker-member-application .formo-radios label.radio input[type="radio"] {
    position: absolute;
    top: 15px;
    left: 15px;
    margin: 0;
}
.component-biker-member-application .fee-strike { opacity: .5; margin-right: 6px; }
.component-biker-member-application .fee-youth { color: #0b9a00; }

/* Zusatzpakete */
.component-biker-member-application .pkg { display: grid; gap: 8px; }
.component-biker-member-application .pkg-item {
    position: relative;
    padding: 10px 40px 10px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}
.component-biker-member-application .pkg-item:hover { border-color: #4789be; }
.component-biker-member-application .pkg-item .control-group { margin: 0; }

/* Die Checkbox steht global auf position:absolute und liegt sonst genau auf
   dem ersten Buchstaben der Beschriftung. */
.component-biker-member-application .pkg-item .formo-checkbox > .control-label { padding-left: 26px; }
.component-biker-member-application .pkg-item .formo-checkbox input[type="checkbox"] {
    left: 2px;
    top: 3px;
    margin: 0;
}
.component-biker-member-application .pkg-item .opt-help {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
}

/* Beitragsuebersicht */
.component-biker-member-application .fee-box {
    margin: 18px 0 8px;
    padding: 12px 14px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    background: rgba(29, 92, 142, .08);
    font-size: 14px;
}
.component-biker-member-application .fee-box dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 16px;
    margin: 0;
}
.component-biker-member-application .fee-box dt { font-weight: var(--ba-weight-regular); }
.component-biker-member-application .fee-box dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.component-biker-member-application .fee-box .fee-total {
    border-top: 1px solid #e5e5e5;
    margin-top: 6px;
    padding-top: 6px;
    font-weight: var(--ba-weight-bold);
}

.component-biker-member-application .submit-row { margin-top: 20px; }


/* Shop-Bestseller-Karussell (2026-08-29)
---------------------------------------------------------------------------------------------------------------------
   Kachelreihe im content-Container von /shop, getragen von FlexSlider. Struktur
   uebernommen vom Racing-Roster (.team-roster-card weiter oben); eigene Klassen,
   weil die Bildproportion und die Hover-Semantik andere sind -- der Roster
   richtet sein Portrait oben aus, ein Produktfoto gehoert mittig.
   --------------------------------------------------------------------------------------------------------------- */

.component-shop-bestseller { margin-bottom: 30px; }

.component-shop-bestseller .shop-bestseller-headline {
    margin: 0 0 18px;
    color: var(--ba-text-strong);
}

/* Das FlexSlider-Theme (media/css/flexslider/style.css) legt auf .flexslider
   einen weissen 4px-Rahmen mit Schlagschatten und 60px Bottom-Margin. Das ist
   fuer eine einzelne Bildbuehne gedacht -- um eine Kachelreihe zeichnet es
   einen weissen Kasten, im Dark Mode einen leuchtenden. */
.component-shop-bestseller .flexslider {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 18px;
}

/* Bis zu drei Kacheln sind gleichzeitig sichtbar -- Pfeile, die nichts
   bewegen, sind schlimmer als keine. */
.component-shop-bestseller.has-few-items .flex-direction-nav { display: none; }

/* Die Pfeile des Themes sind bis zum Hover unsichtbar UND ausserhalb des
   Rahmens geparkt (style.css: opacity 0, left/right -36px). Auf einer
   Bildbuehne ist das dezent, auf einer Produktreihe verschweigt es, dass rechts
   noch Artikel stehen. Hier also dauerhaft sichtbar. */
.component-shop-bestseller .flex-direction-nav .flex-prev { opacity: 0.8; left: 5px; }
.component-shop-bestseller .flex-direction-nav .flex-next { opacity: 0.8; right: 5px; }
.component-shop-bestseller .flex-direction-nav a:hover { opacity: 1; }

/* Flexbox auf .slides gibt allen Kacheln einer Reihe dieselbe Hoehe -- ohne das
   endet jede Karte dort, wo ihr Text aufhoert, und die Preiszeilen stehen
   treppenfoermig. FlexSlider setzt Breite und float per Inline-Style; die
   bleiben gueltig, flex-shrink muss aber aus, sonst quetscht der Flex-Container
   die Kacheln zusammen.
   Das display:block ist zusaetzlich der Rettungsanker fuer den Fall, dass die
   CSS laedt und das JS nicht: style.css versteckt .slides > li per Default,
   ohne diese Regel waere die Reihe dann komplett leer statt nur ungeslidet. */
.component-shop-bestseller .slides { display: flex; align-items: stretch; }
.component-shop-bestseller .slides > li {
    display: block;
    flex: 0 0 auto;
    height: auto;
}

.shop-bestseller-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.shop-bestseller-card:hover,
.shop-bestseller-card:focus {
    transform: translateY(-3px);
    /* Schatten-Token statt eigenem rgba: im Dark Mode braucht er mehr Deckung,
       und genau das macht --ba-shadow dort schon. */
    box-shadow: var(--ba-shadow);
    text-decoration: none;
    color: inherit;
}

/* Weiss, nicht die uebliche Platzhalter-Flaeche: die owayo-Renderings sind
   PNGs mit TRANSPARENTEM Hintergrund (Alpha 127 in der Ecke), das Grau von
   --ba-surface-3 schien also durch und sah aus wie ein Grauschleier im Bild.
   Freisteller brauchen einen hellen Grund -- auch im Dark Mode, sonst
   verschwinden weisse Schriftzuege auf den Trikots. */
.shop-bestseller-card-image {
    position: relative;
    margin: 6px 6px 0;
    border-radius: 3px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--ba-white);
}
/* Spezifitaet 0,3,0 -- muss ".flexslider .slides img { height: auto }" weiter
   oben in dieser Datei schlagen, sonst laeuft das Bild aus dem Quadrat. */
.component-shop-bestseller .shop-bestseller-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shop-bestseller-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--ba-primary);
    color: var(--ba-text-on-brand);
    font-size: 11px;
    font-weight: var(--ba-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shop-bestseller-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 12px 14px 14px;
}
.shop-bestseller-card-title {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.25;
    color: var(--ba-text-strong);
}
.shop-bestseller-card-teaser {
    margin: 0 0 10px;
    color: var(--ba-text-soft);
    font-size: 13px;
    line-height: 1.4;
}

/* Preisblock ans Kartenende, damit er ueber unterschiedlich lange Titel hinweg
   auf einer Linie steht. */
.shop-bestseller-price { margin: auto 0 2px; }
.shop-bestseller-price-regular {
    color: var(--ba-text);
    font-size: 15px;
    font-weight: var(--ba-weight-bold);
    font-variant-numeric: tabular-nums;
}
.shop-bestseller-price-regular.is-struck {
    text-decoration: line-through;
    color: var(--ba-text-muted);
    font-weight: var(--ba-weight-regular);
    font-size: 13px;
}

.shop-bestseller-price-member {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.shop-bestseller-price-member-label {
    color: var(--ba-text-muted);
    font-size: 12px;
}
.shop-bestseller-price-member-value {
    color: var(--ba-text-strong);
    font-size: 17px;
    font-weight: var(--ba-weight-bold);
    font-variant-numeric: tabular-nums;
}
/* --ba-danger, NICHT --ba-accent-text: Letzteres hellt im Dark Mode zu
   --ba-red-300 auf -- richtig fuer Rot als Schrift, falsch als Flaeche hinter
   weisser Schrift. Steht so in tokens.css. */
.shop-bestseller-saving {
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--ba-danger);
    color: var(--ba-text-on-brand);
    font-size: 11px;
    font-weight: var(--ba-weight-bold);
    white-space: nowrap;
}

.shop-bestseller-card-shop {
    margin: 8px 0 0;
    color: var(--ba-text-subtle);
    font-size: 12px;
}

.shop-bestseller-cta { margin: 0; }


/* Shop-Rabattcodes im Benefits-Tab (2026-08-29)
---------------------------------------------------------------------------------------------------------------------
   Karten neben den Zusatzpaketen (.benefits-grid weiter oben), aber eigene
   Klassen: hier ist der Code die Hauptinformation und muss abtippbar sein,
   dort ein Status.
   --------------------------------------------------------------------------------------------------------------- */

.pt-subhead {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700; /* Rabattcodes, Zusatzpakete, Strava-Club, Benachrichtigungen fett (PW 2026-10-04) */
    color: var(--ba-text-strong);
}

.discount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 12px 0 28px;
}

/* Akzentlinie in Rot -- die Konvention des Bestands (tokens.css zu
   --ba-red-600: "Destruktiv, Anmelde-CTA, Akzentlinien"). Blau ist hier
   Text- und Flaechenfarbe, nicht die Kante. */
.discount-card {
    padding: 14px 16px;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-left: 3px solid var(--ba-danger);
    border-radius: 4px;
}

.dc-shop {
    margin-bottom: 6px;
    color: var(--ba-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dc-code {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Monospace und weite Laufweite: der Code wird abgetippt, und 0/O sowie 1/l
   sind in der Fliesstextschrift nicht zu unterscheiden. */
.dc-code-value {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 18px;
    font-weight: var(--ba-weight-bold);
    letter-spacing: 0.08em;
    color: var(--ba-text-strong);
    user-select: all;
}

.dc-copy {
    padding: 3px 10px;
    border: 1px solid var(--ba-border-strong);
    border-radius: 3px;
    background: var(--ba-surface-2);
    color: var(--ba-text-soft);
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
}
.dc-copy:hover { border-color: var(--ba-primary); color: var(--ba-primary); }
.dc-copy.is-done { border-color: var(--ba-success); color: var(--ba-success); }

/* Derselbe Kopierknopf fuer die IBAN auf der Spendenseite (CMS-Text aus
   Migration 20261017153500), dort in Fliesstextgroesse. */
.iban-copy .dc-code-value {
    font-size: inherit;
    letter-spacing: 0.04em;
}
.girocode img {
    display: block;
    margin: 4px 0 8px -8px;
}

.dc-note {
    margin: 8px 0 0;
    color: var(--ba-text-soft);
    font-size: 13px;
    line-height: 1.4;
}

.dc-until {
    margin: 4px 0 0;
    color: var(--ba-text-subtle);
    font-size: 12px;
}


/* Container "content_wide" (2026-08-29)
---------------------------------------------------------------------------------------------------------------------
   Volle Breite ueber Inhalt UND Sidebar, direkt unter dem Header. Ausgegeben in
   views/page/default/fulltext.tpl, im Seiten-Editor sichtbar ueber
   config/templates.php. Bewusst mit derselben .container-Breite wie der Rest --
   randlos ueber den Viewport waere ein anderes Layout, nicht dasselbe eine
   Spalte breiter.
   --------------------------------------------------------------------------------------------------------------- */

.l-content-wide {
    padding-top: 30px;
}
.l-content-wide + .l-content {
    padding-top: 10px;
}


/* Team-Erfolge (2026-08-30)
---------------------------------------------------------------------------------------------------------------------
   Component_Team_Achievement_List: pro Jahrgang eine Ueberschrift, darunter
   Karten je Rennen/Serie. Eine Karte ohne Platzierungen ist eine reine
   Teilnahme und steht bewusst mit in der Liste -- sie bekommt keine Sonderfarbe,
   nur weniger Inhalt.

   Ausschliesslich Tokens aus tokens.css: [data-theme="dark"] schaltet die
   bereits um, eine Kopie in dark.css waere ein zweiter Ort fuer denselben Fakt.
   --------------------------------------------------------------------------------------------------------------- */

.team-achievements-headline {
    margin-top: 0;
}

.team-achievements-year + .team-achievements-year {
    margin-top: 28px;
}

.team-achievements-year-label {
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ba-danger);
    font-family: var(--ba-font-heading);
    font-size: 22px;
    color: var(--ba-text-strong);
}

.team-achievements-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    /* flex-start, nicht der Default stretch: eine Teilnahme ohne Platzierungen
       ist zwei Zeilen hoch und wuerde sonst auf die Hoehe der Serie neben ihr
       gezogen -- eine halb leere Karte, die aussieht, als fehle etwas. */
    align-items: flex-start;
    gap: 12px;
}

.team-achievements-item {
    flex: 1 1 300px;
    min-width: 0;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-left: 3px solid var(--ba-border-brand);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 12px 14px;
}

/* Teilnahme ohne Platzierung: dieselbe Karte, nur ohne den blauen Akzent --
   sonst liest sie sich wie ein Ergebnis, das beim Eintragen vergessen wurde. */
.team-achievements-item.is-participation {
    border-left-color: var(--ba-border-strong);
}

.team-achievements-item-title {
    margin: 0;
    font-family: var(--ba-font-heading);
    font-size: 16px;
    line-height: 1.3;
    color: var(--ba-text-strong);
}

.team-achievements-item-subtitle {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--ba-text-muted);
}

.team-achievements-results {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.team-achievements-result {
    padding: 4px 0;
    border-top: 1px solid var(--ba-border);
    font-size: 14px;
    color: var(--ba-text-soft);
}

.team-achievements-result-detail {
    display: block;
    font-size: 12px;
    color: var(--ba-text-subtle);
}

.team-achievements-result-place {
    font-weight: var(--ba-weight-bold);
    color: var(--ba-text);
}

.team-achievements-result-category {
    color: var(--ba-text-muted);
}

.team-achievements-result-place + .team-achievements-result-category:before {
    content: "·";
    margin: 0 5px;
    color: var(--ba-text-subtle);
}

@media (max-width: 480px) {
    .team-achievements-item {
        flex-basis: 100%;
    }
}


/* Vereinschronik (2026-09-02)
---------------------------------------------------------------------------------------------------------------------
   Component_Club_Timeline: pro Jahr ein Abschnitt mit grosser Jahreszahl,
   Kennzahlen, Meilensteinen und Bildkacheln aus dem Artikelarchiv. Links eine
   Jahresleiste, die auf Desktop mitlaeuft (sticky).

   Ausschliesslich Tokens aus tokens.css, nichts in dark.css duplizieren
   (Regel wie bei den Team-Erfolgen oben).
   --------------------------------------------------------------------------------------------------------------- */

.club-timeline {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0 28px;
}

.club-timeline-headline {
    grid-column: 1 / -1;
    margin-top: 0;
}

.club-timeline-nav {
    grid-column: 1;
    align-self: start;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: none;
}

.club-timeline-nav::-webkit-scrollbar {
    display: none;
}

.club-timeline-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--ba-border);
}

.club-timeline-nav a {
    display: block;
    padding: 3px 0 3px 12px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-family: var(--ba-font-heading);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ba-text-muted);
    text-decoration: none;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.club-timeline-nav a:hover,
.club-timeline-nav a:focus,
.club-timeline-nav a.is-current {
    color: var(--ba-text-strong);
    border-left-color: var(--ba-danger);
}

.club-timeline-years {
    grid-column: 2;
    min-width: 0;
}

.club-timeline-year {
    scroll-margin-top: 110px;
    padding-bottom: 36px;
}

.club-timeline-year + .club-timeline-year {
    border-top: 1px solid var(--ba-border);
    padding-top: 28px;
}

.club-timeline-year-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 24px;
    margin-bottom: 14px;
}

.club-timeline-year-label {
    margin: 0;
    font-family: var(--ba-font-heading);
    font-weight: 300;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ba-text-strong);
}

.club-timeline-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: 14px;
    color: var(--ba-text-muted);
}

.club-timeline-stats b {
    font-weight: var(--ba-weight-bold);
    color: var(--ba-text);
}

.club-timeline-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.club-timeline-card {
    display: block;
    text-decoration: none;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.club-timeline-card:hover,
.club-timeline-card:focus {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.club-timeline-card-media {
    aspect-ratio: 3 / 2;
    background: var(--ba-surface-3) url('/media/images/default/no-image.svg') no-repeat center center;
    background-size: 30%;
}

.club-timeline-card-media[style] {
    background-size: cover;
    background-position: center;
}

.club-timeline-card.is-textonly .club-timeline-card-media {
    aspect-ratio: 5 / 1;
}

.club-timeline-card-body {
    padding: 10px 12px 12px;
}

.club-timeline-card-meta {
    display: block;
    font-size: 12px;
    color: var(--ba-text-subtle);
}

.club-timeline-card-title {
    margin: 4px 0 0;
    font-family: var(--ba-font-heading);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.35;
    color: var(--ba-text-strong);
}

@media (max-width: 767px) {
    .club-timeline {
        display: block;
    }

    .club-timeline-nav {
        position: sticky;
        top: 0;
        z-index: 5;
        max-height: none;
        margin: 0 -15px 18px;
        padding: 8px 15px;
        background: var(--ba-bg);
        border-bottom: 1px solid var(--ba-border);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .club-timeline-nav ul {
        display: flex;
        gap: 4px;
        border-left: none;
    }

    .club-timeline-nav a {
        margin: 0;
        padding: 4px 10px;
        border-left: none;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .club-timeline-nav a:hover,
    .club-timeline-nav a:focus,
    .club-timeline-nav a.is-current {
        border-bottom-color: var(--ba-danger);
    }

    .club-timeline-year {
        scroll-margin-top: 60px;
    }

    .club-timeline-year-label {
        font-size: 42px;
    }

    .club-timeline-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .club-timeline-highlights {
        grid-template-columns: 1fr;
    }
}


/* Race-Day (2026-09-02)
---------------------------------------------------------------------------------------------------------------------
   Component_Race_Day auf der Startseite: ein dunkelblaues Band je Renntag mit
   Fahrer-Portraits, nach dem Rennen mit den Platzierungen des verknuepften
   Team-Erfolgs. --ba-blue-900 ist Markenfarbe (Footer) und bleibt in beiden
   Themes gleich; alles andere sind Tokens.
   --------------------------------------------------------------------------------------------------------------- */

.race-day-headline {
    margin-top: 0;
}

.race-day-card {
    position: relative;
    background: var(--ba-blue-900);
    color: var(--ba-white);
    border-radius: 4px;
    padding: 22px 26px 24px;
    overflow: hidden;
}

.race-day-card + .race-day-card {
    margin-top: 14px;
}

.race-day-card.is-live::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--ba-gold-500);
}

.race-day-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.race-day-label {
    font-weight: var(--ba-weight-bold);
    color: var(--ba-gold-500);
}

.race-day-card.is-result .race-day-label {
    color: var(--ba-red-300);
}

.race-day-team {
    color: var(--ba-night-text-muted);
    font-weight: 300;
}

.race-day-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px 40px;
}

.race-day-info {
    flex: 1 1 280px;
    min-width: 0;
}

.race-day-name {
    margin: 0;
    font-family: var(--ba-font-heading);
    font-weight: 300;
    font-size: 32px;
    line-height: 1.15;
    color: var(--ba-white);
}

.race-day-name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    transition: border-color 0.2s ease-in-out;
}

.race-day-name a:hover,
.race-day-name a:focus {
    color: inherit;
    border-bottom-color: var(--ba-gold-500);
}

.race-day-meta {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--ba-night-text);
}

.race-day-location::before {
    content: "·";
    margin: 0 8px;
    color: var(--ba-night-text-subtle);
}

.race-day-teaser {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--ba-night-text-muted);
}

.race-day-riders {
    flex: 2 1 360px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
}

.race-day-rider {
    width: 92px;
    text-align: center;
}

.race-day-rider-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.race-day-rider-link:hover,
.race-day-rider-link:focus {
    color: inherit;
    text-decoration: none;
}

.race-day-rider-image {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 6px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ba-night-600);
    border: 2px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.race-day-rider-link:hover .race-day-rider-image,
.race-day-rider-link:focus .race-day-rider-image {
    transform: translateY(-3px);
    border-color: var(--ba-gold-500);
}

.race-day-rider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.race-day-rider-name {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: var(--ba-night-text-bright);
}

.race-day-results {
    flex: 1 1 320px;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--ba-red-300);
    border-radius: 0 4px 4px 0;
    padding: 12px 16px;
}

.race-day-results-title {
    margin: 0;
    font-family: var(--ba-font-heading);
    font-weight: 400;
    font-size: 17px;
    color: var(--ba-white);
}

.race-day-results-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ba-night-text-muted);
}

.race-day-results-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 14px;
    color: var(--ba-night-text);
}

.race-day-results-list li {
    padding: 4px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.race-day-results-list b {
    color: var(--ba-white);
}

.race-day-result-category::before,
.race-day-result-detail::before {
    content: "·";
    margin: 0 6px;
    color: var(--ba-night-text-subtle);
}

.race-day-result-detail {
    color: var(--ba-night-text-muted);
}

@media (max-width: 767px) {
    .race-day-card {
        padding: 18px 16px 20px;
    }

    .race-day-name {
        font-size: 26px;
    }

    .race-day-riders {
        gap: 12px 10px;
    }

    .race-day-rider {
        width: 76px;
    }

    .race-day-rider-image {
        width: 60px;
        height: 60px;
    }
}


/* Web-Push-Opt-in im Konto (2026-09-02)
---------------------------------------------------------------------------------------------------------------------
   .push-settings im Benefits-Tab; nur sichtbar, wenn config/push.php aktiv ist.
   Tokens only, nichts in dark.css.
   --------------------------------------------------------------------------------------------------------------- */

.push-settings {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--ba-border);
}

.push-topics {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
}

.push-topic {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: 15px;
    color: var(--ba-text);
    cursor: pointer;
}

.push-topic input {
    margin-top: 4px;
}

.push-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.push-status {
    font-size: 14px;
    color: var(--ba-text-muted);
}

/* =====================================================================================================================
   TEAM-BEREICHE — Entwurf C "Kompakt" (2026-09-18)
   ---------------------------------------------------------------------------------------------------------------------
   Gilt fuer /teams und die Team-Unterseiten. Was das Aussehen vorhandener Komponenten nur hier aendert, haengt an
   `body.team-area` (Entscheidung PW 2026-09-18). Ausnahmen, die inzwischen auch /racing tragen: News-Karten
   (.article-cards, 2026-09-19) und die Roster-Zeilenliste (2026-09-26).

   BREAKPOINT 900px, nicht Bootstraps 768/992: der Entwurf schaltet dort von der Tab-Leiste auf die Pill-Navigation.
   Deshalb stehen hier eigene Media-Queries statt visible-xs/hidden-sm.

   Radius 8px statt der projektweiten 4px: bewusst aus dem Entwurf uebernommen, lokal als --team-radius, damit die
   Zahl an einer Stelle steht.
   ================================================================================================================== */
.team-area,
.component-team-roster,
.component-team-facts,
.component-team-schedule {
    --team-radius: 8px;
}

/* Platz fuer die Tab-Leiste: ohne dieses Padding verdeckt sie das Seitenende.
   Nicht an .l-sub -- der Fuss steht hinter .l-sub, dort verschwand
   "© Bikeaid 2026" unter der Leiste. Seit 2026-10-04 am Partner-Streifen
   statt am <footer>: der Streifen (shared/footer.tpl) steht nach dem Fuss und
   ist das letzte sichtbare Element. Mit dem Padding am Fuss lag auf Staging
   das HYLO-Logo unter der Leiste, und seit sie schwebt, stand unter ihr ein
   leerer Rest des Streifens. env() faellt auf 0px zurueck, wo es die Funktion
   nicht gibt. */
@media (max-width: 899px) {
    /* has-tabbar statt team-area: die Kontouebersicht traegt dieselbe Leiste
       (frontend/component/biker/account/tabbar.tpl), header.tpl setzt die
       Klasse fuer beide. */
    /* Rand in Fussfarbe statt Innenabstand: der Platz unter der Leiste
       stand sonst als weisser Streifen unter dem Fuss (U26). */
    body.has-tabbar .component-partner {
        border-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) solid var(--ba-blue-900);
    }
    /* #back-to-top nur, solange die Leiste weg ist (beim Lesen weggescrollt
       oder noch aufgeschoben). Bis 2026-10-17 rutschte er ueber die Leiste:
       beim Hochscrollen standen dann Kopf, Leiste, Safaris Leiste und der
       Knopf gleichzeitig auf dem Schirm, und er ueberlappte die Pille
       (UX-Review S2). Am Seitenanfang ist er ohnehin aus (page.js).
       visibility statt display: das Einblenden setzt display inline. */
    body.has-tabbar #back-to-top {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    body.has-tabbar:not(.navbar-scroll-hidden):not(.tabbar-deferred) #back-to-top {
        visibility: hidden;
    }
    /* Kontouebersicht: die Leiste ersetzt hier die Pills oben. */
    body.has-tabbar .profile-tabs .pt-tabs {
        display: none;
    }
    /* Bei offenem "Mehr"-Sheet laege der Knopf (z-index 9999) auf dessen
       Links. visibility statt display: das Einblenden setzt display inline. */
    body.has-tabbar:has(#team-sheet-toggle:checked) #back-to-top {
        visibility: hidden;
    }
    /* Der Subnav-Streifen doppelt in den Team-Bereichen die Tab-Leiste,
       ebenso in den Sektionen mit Leiste (section-tabbar, 2026-09-29).
       !important, weil Bootstraps .visible-xs/.visible-sm am selben Element
       ihrerseits mit !important auf display: block gehen. */
    body.team-area .mobile-subnav-wrap,
    body.section-tabbar .mobile-subnav-wrap {
        display: none !important;
    }
}

/* Kennzahlen-Streifen (Component_Team_Facts)
--------------------------------------------------------------------------------------------------------------------- */
.component-team-facts {
    margin: 0 0 20px;
}
.team-facts-headline {
    font-size: 20px;
    margin: 0 0 10px;
}
.team-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ba-border);
    border: 1px solid var(--ba-border);
    border-radius: var(--team-radius);
    overflow: hidden;
    box-shadow: var(--ba-shadow);
    /* Der Streifen ueberlappt im Entwurf das Header-Band nach oben. */
    margin-top: -18px;
    position: relative;
    z-index: var(--ba-z-raised);
}
.team-facts-1 { grid-template-columns: 1fr; }
.team-facts-2 { grid-template-columns: repeat(2, 1fr); }
.team-fact {
    background: var(--ba-surface);
    padding: 12px 10px;
    text-align: center;
}
.team-fact-value {
    font-family: var(--ba-font-heading);
    font-size: clamp(20px, 5.5vw, 28px);
    line-height: 1.1;
    color: var(--ba-text-strong);
    font-variant-numeric: tabular-nums;
}
.team-fact-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ba-text-soft);
    font-weight: var(--ba-weight-bold);
    margin-top: 2px;
}

/* Termine (Component_Team_Schedule)
--------------------------------------------------------------------------------------------------------------------- */
.team-schedule-headline {
    font-size: 22px;
    margin: 0 0 6px;
}
.team-schedule-month-label {
    font-family: var(--ba-font-body);
    font-size: 12px;
    font-weight: var(--ba-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ba-text-soft);
    margin: 18px 0 8px;
}
.team-schedule-event {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--team-radius);
    padding: 10px 12px;
    margin-bottom: 8px;
}
.team-schedule-date {
    font-family: var(--ba-font-heading);
    font-size: 26px;
    color: var(--ba-text-strong);
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.team-schedule-date small {
    display: block;
    font-family: var(--ba-font-body);
    font-size: 10px;
    font-weight: var(--ba-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ba-text-soft);
    margin-top: 3px;
}
.team-schedule-date-empty {
    color: var(--ba-text-subtle);
}
.team-schedule-name {
    font-family: var(--ba-font-heading);
    font-size: 16px;
    font-weight: var(--ba-weight-regular);
    color: var(--ba-text-strong);
    margin: 0 0 3px;
}
.team-schedule-meta {
    margin: 0;
    font-size: 12.5px;
    color: var(--ba-text-soft);
}
.team-schedule-category {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--ba-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: var(--ba-radius-sm);
    background: var(--ba-blue-900);
    color: var(--ba-text-on-brand);
    margin-right: 6px;
    vertical-align: middle;
}
@media (min-width: 720px) {
    .team-schedule-months {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
    }
    /* Eine Monatsgruppe soll nicht ueber die Spalten reissen. */
    .team-schedule-month {
        break-inside: avoid;
    }
}

/* Mobile Tab-Leiste + Bottom-Sheet
   ------------------------------------------------------------------------------------------------------------------
   Ohne JavaScript: die versteckte Checkbox #team-sheet-toggle steuert Sheet und Scrim. Ein Klick-Handler waere die
   naechste Stelle, die bei abgeschaltetem JS still nicht mehr bedienbar ist.
--------------------------------------------------------------------------------------------------------------------- */
.team-sheet-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.team-tabbar {
    /* Schwebende Glas-Pille (2026-10-04, Vorbild iOS-App-Leisten), Aktiv-Tab
       als Kapsel. Im Browser ohne Abstand direkt ueber Safaris Leiste
       (mit Luft wirkten die zwei Pillen gestapelt).
       Seitenrand max(30px, 7.5vw), die Pille also hoechstens rund 85 % der
       Breite: Safari 26 haelt ein fixes Element am unteren Rand, das fast
       die ganze Breite einnimmt, fuer eine Bodenleiste und fuellt den Bereich
       hinter seiner eigenen Leiste dann deckend (weiss bzw. dunkelblau statt
       Glas). Mit 10 und 20px Rand passierte das, mit 30px nicht, und zwar
       aus- wie eingeklappt; der Abstand nach unten (getestet 0 bis 24px)
       und die Farbe (Glas auf ::before) spielen keine Rolle (iPhone-17-
       Simulator, 402pt breit, Befund PW 2026-10-04).
       In der installierten App 10px Luft, siehe display-mode unten. Ohne
       backdrop-filter bleibt die Leiste deckend, sonst stuende Text
       ungefiltert auf Fotos. */
    position: fixed;
    left: max(30px, 7.5vw);
    right: max(30px, 7.5vw);
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: var(--ba-z-sticky);
    max-width: 600px;
    margin: 0 auto;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15, 40, 70, 0.14);
    transition: transform 0.3s ease;
}
/* Deckkraft 0.72 wie das Navbar-Glas: transparenter wird die 10,5-px-Schrift
   ueber hellen Fotos (Hero, Galerien) unlesbar. saturate haelt die Farben
   dahinter kraeftig, sonst wirkt das Glas grau. */
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    .team-tabbar {
        background: rgba(255, 255, 255, 0.72);
        border-color: rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
    }
}
@media (prefers-reduced-transparency: reduce) {
    .team-tabbar {
        background: var(--ba-surface);
    }
}
.team-tabbar-inner {
    display: grid;
    /* --tab-count setzt team_tabbar.tpl (Tabs + "Mehr"). */
    grid-template-columns: repeat(var(--tab-count, 5), 1fr);
    padding: 5px;
}
/* Installierte App (Manifest display: standalone): keine Browser-Leiste
   darunter, die Pille bekommt Luft zum Rand wie in nativen Apps. */
@media (display-mode: standalone) {
    .team-tabbar {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}
/* Beim Runterscrollen mit der Navbar aus dem Bild (page.js setzt
   navbar-scroll-hidden), beim Hochscrollen zurueck. Nicht bei offenem
   "Mehr"-Sheet. Die 20px schieben auch die Pille samt Schatten ganz raus. */
@media (max-width: 899px) {
    body.navbar-scroll-hidden:not(:has(#team-sheet-toggle:checked)) .team-tabbar,
    body.tabbar-deferred .team-tabbar {
        transform: translateY(calc(100% + 20px + env(safe-area-inset-bottom, 0px)));
    }
}
/* .team-tabbar davor: die Leiste steht innerhalb von .l-sub, und dort setzt
   sowohl screen.css als auch dark.css die Linkfarbe mit hoeherer Spezifitaet
   -- ohne den Vorsatz stuenden die Tabs rot statt in Textfarbe. */
.team-tabbar .team-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    /* 2px seitlich statt 4: "Ride for help" (Charity) braucht bei 375 px
       gut 67 der 75 px einer Spalte. */
    padding: 7px 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ba-text-soft);
    /* 44px Mindestflaeche ist die Vorgabe; 52px geben Icon plus Label Platz,
       die Leiste legt ihren Innenabstand noch drumherum. */
    min-height: 52px;
    margin: 0;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
}
/* 320er Geraete (iPhone SE 1): mit Pillenrand stiessen "Übersicht" und
   "Spenden" aneinander, die Kapsel war schmaler als ihr Label. */
@media (max-width: 359px) {
    /* 24px statt 30: bei 320px Breite noch 85 % (Safari-Fuellung, s. o.). */
    .team-tabbar {
        left: 24px;
        right: 24px;
    }
    .team-tabbar-inner {
        padding: 4px;
    }
    .team-tabbar .team-tab {
        font-size: 9.5px;
        letter-spacing: 0;
    }
}
.team-tabbar .team-tab:hover,
.team-tabbar .team-tab:focus {
    color: var(--ba-link-hover);
    text-decoration: none;
}
.team-tabbar .team-tab.is-active {
    color: var(--ba-link-hover);
    /* Kapsel: der Aktiv-Tab ist damit auch ohne Farbunterschied erkennbar. */
    background: rgba(15, 40, 70, 0.07);
}
/* Einzeilig: ein umbrechendes Label macht den Tab hoeher als seine Nachbarn.
   Auf sehr schmalen Geraeten (320 px) kuerzt die Ellipse. */
.team-tab-label {
    display: block;
    max-width: 100%;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Icons als Maske: eine Farbe (currentColor) fuer hell und dunkel, kein
   zweiter Satz Dateien fuer den Dark Mode. */
.team-tab-icon {
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.team-tab-icon-overview {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.team-tab-icon-news {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5h13v14H4zM17 8h3v9a2 2 0 0 1-2 2M7 9h7M7 12h7M7 15h4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5h13v14H4zM17 8h3v9a2 2 0 0 1-2 2M7 9h7M7 12h7M7 15h4'/%3E%3C/svg%3E");
}
.team-tab-icon-sportler {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='7' r='3.5'/%3E%3Cpath d='M4 21c0-4 3.5-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='7' r='3.5'/%3E%3Cpath d='M4 21c0-4 3.5-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}
.team-tab-icon-termine {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.team-tab-icon-more {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='6' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='18' cy='12' r='1.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='6' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='18' cy='12' r='1.6'/%3E%3C/svg%3E");
}
/* Sektions-Tabs (Helper_Section_Tabbar, 2026-09-29), gleicher Stil: 24er Raster, Strich 1.8. */
.team-tab-icon-mitglied { /* Person mit Plus */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='3.5'/%3E%3Cpath d='M3 21c0-4 3-7 7-7s7 3 7 7M19 7v6M16 10h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='3.5'/%3E%3Cpath d='M3 21c0-4 3-7 7-7s7 3 7 7M19 7v6M16 10h6'/%3E%3C/svg%3E");
}
.team-tab-icon-archiv { /* Ablagebox */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4'/%3E%3C/svg%3E");
}
.team-tab-icon-spenden { /* Herz */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9-9.5A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 9 3.5C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9-9.5A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 9 3.5C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E");
}
.team-tab-icon-rideforhelp { /* Fahrrad */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='16' r='3.5'/%3E%3Ccircle cx='18.5' cy='16' r='3.5'/%3E%3Cpath d='M5.5 16l4-7h6l3 7M9.5 9l3 7h-7M8 6h3M15.5 9l-1-3h2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='16' r='3.5'/%3E%3Ccircle cx='18.5' cy='16' r='3.5'/%3E%3Cpath d='M5.5 16l4-7h6l3 7M9.5 9l3 7h-7M8 6h3M15.5 9l-1-3h2'/%3E%3C/svg%3E");
}
.team-tab-icon-saarvertikal { /* Berg */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20l7-13 4 7 3-4 6 10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20l7-13 4 7 3-4 6 10z'/%3E%3C/svg%3E");
}
.team-tab-icon-social { /* Sprechblase */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-5 4v-4H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-5 4v-4H4z'/%3E%3C/svg%3E");
}
.team-tab-icon-videos { /* Play */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10 9v6l5-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10 9v6l5-3z'/%3E%3C/svg%3E");
}
.team-tab-icon-downloads { /* Download */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
}
.team-tab-icon-chronik { /* Buch */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V5a2 2 0 0 1 2-2h12v15H7a2 2 0 0 0 0 4h12M9 7h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V5a2 2 0 0 1 2-2h12v15H7a2 2 0 0 0 0 4h12M9 7h6'/%3E%3C/svg%3E");
}
/* Offenes Sheet: die Seite darunter scrollt nicht mit (UX-Review U25).
   overflow am Wurzelelement haelt auch iOS Safari ab 16 an; touch-action am
   Scrim faengt Wischgesten neben dem Sheet ab, overscroll-behavior das
   Weiterreichen aus dem Sheet selbst. Esc schliesst es (page.js). */
html:has(#team-sheet-toggle:checked) {
    overflow: hidden;
}
.team-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--ba-z-sticky) - 1);
    max-height: 85vh;
    max-height: 85svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ba-surface);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
    /* Das Sheet laeuft hinter der Leiste bis an den Rand, der letzte Eintrag
       muss ueber ihr stehen. */
    padding: 8px 16px calc(84px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.25s ease;
}
.team-sheet-grip {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--ba-border-strong);
    margin: 4px auto 12px;
}
/* .team-sheet davor, weil die Linkfarbe im Inhaltsbereich (.l-sub a) sonst
   gewinnt und die Eintraege rot statt in Textfarbe stuenden. */
.team-sheet .team-sheet-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 4px;
    font-size: 16px;
    color: var(--ba-text);
    border-bottom: 1px solid var(--ba-border);
}
.team-sheet-link:last-child {
    border-bottom: 0;
}
.team-sheet-link.is-active {
    font-weight: var(--ba-weight-bold);
    color: var(--ba-link);
}
.team-scrim {
    position: fixed;
    inset: 0;
    touch-action: none;
    z-index: calc(var(--ba-z-sticky) - 2);
    background: rgba(0, 20, 40, 0.4);
    display: none;
    margin: 0;
}
#team-sheet-toggle:checked ~ .team-sheet {
    transform: translateY(0);
}
#team-sheet-toggle:checked ~ .team-scrim {
    display: block;
}
/* Tastatur: die Checkbox selbst ist unsichtbar, der Fokus muss am Label zu
   sehen sein. */
#team-sheet-toggle:focus-visible ~ .team-tabbar .team-tab-more {
    outline: 3px solid var(--ba-focus-ring);
    outline-offset: -3px;
}
/* Installierte App: die Pille steht 10px hoeher, alle Platzhalter darum
   groesser (84 statt 72; Pille 66px + Luft). */
@media (max-width: 899px) and (display-mode: standalone) {
    body.has-tabbar .component-partner {
        border-bottom-width: calc(84px + env(safe-area-inset-bottom, 0px));
    }
    .team-sheet {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}
/* Ab 900px uebernimmt die vorhandene Sidebar-Navigation. */
@media (min-width: 900px) {
    .team-tabbar,
    .team-sheet,
    .team-scrim {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .team-sheet {
        transition: none;
    }
}

/* Roster als Zeilenliste — alle Kader-Listen
   ------------------------------------------------------------------------------------------------------------------
   Zeilen mit rundem Portrait, wie im Entwurf C: eine Liste liest sich bei elf Fahrern schneller als elf Karten.
   Bis 2026-09-26 nur in den Team-Bereichen (body.team-area), /racing/riders behielt die Trading Cards. Seit
   2026-09-26 auch /racing/riders und /racing/betreuer in DE und EN (Entscheid PW: "wie die MTB-Seite").
   Reines CSS auf dem vorhandenen Markup, ueberschreibt die Kartenregeln unter "Team-Roster (Racing Riders)".
--------------------------------------------------------------------------------------------------------------------- */
.team-roster-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 14px 0 0;
}
/* Gleiche Falle wie bei den Artikel-Karten: das Roster-Grid sitzt auf einer
   Bootstrap-.row, deren Clearfix-Pseudoelemente im Grid zu eigenen Zellen
   werden -- die erste Karte rutschte in die zweite Spalte (Staging 2026-09-19,
   Devo-Sportler und -Betreuer; Pro-Team ist Flex und nicht betroffen). */
.team-roster-grid::before,
.team-roster-grid::after {
    display: none;
    content: none;
}
/* Die Spaltenzahl haengt an der BREITE DES INHALTSBEREICHS, nicht an der
   Fensterbreite: das Roster steht in der 8-von-12-Spalte neben der Sidebar,
   hat also rund zwei Drittel des Fensters. Die Schwellen des Entwurfs
   (720/1000px) gelten dort fuer die volle Breite und wuerden hier zwei
   Spalten in einen Bereich pressen, in dem schon ein Name umbricht. */
@media (min-width: 992px) {
    .team-roster-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
/* KEINE dritte Spalte: der Entwurf sieht sie ab 1000px vor, rechnet dort
   aber mit der vollen Breite. Neben der Sidebar bleiben bei drei Spalten
   rund 230px je Zeile -- darin bricht schon "Allbrecht Drewes" um. */
/* Die Bootstrap-Spalte traegt in der Zeilenfassung keine Breite mehr. */
.team-roster-col {
    width: auto;
    padding: 0;
    float: none;
}
.team-roster-card {
    display: grid;
    grid-template-columns: 64px 1fr 20px;
    gap: 12px;
    align-items: center;
    padding: 8px 12px 8px 8px;
    border-radius: var(--team-radius);
    min-height: 80px;
}
.team-roster-card:hover,
.team-roster-card:focus {
    /* Kein Anheben: bei einer Liste wandert sonst die ganze Zeile. */
    transform: none;
    box-shadow: var(--ba-shadow);
}
.team-roster-card-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ba-border);
    background: var(--ba-surface-3);
}
.team-roster-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Portraits sind hochkant, die Gesichter liegen oben. */
    object-position: 50% 15%;
}
.team-roster-card-body {
    padding: 0;
}
.team-roster-card-name {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.25;
}
/* Kurzbio gehoert auf die Detailseite, nicht in die Zeile. */
.team-roster-card-bio {
    display: none;
}
.team-roster-card-position,
.team-roster-card-city {
    margin: 3px 0 0;
    font-size: 12px;
}
/* Pfeil rechts: er steht nur an verlinkten Karten. */
.team-roster-card:not(.team-roster-card-unlinked)::after {
    content: "\203A";
    color: var(--ba-accent-text);
    font-size: 20px;
    line-height: 1;
    justify-self: end;
}
.team-roster-card-unlinked {
    grid-template-columns: 64px 1fr;
}

/* News-Karten — Team-Bereiche und jedes Archiv mit "Mehr Artikel"-Button
   ------------------------------------------------------------------------------------------------------------------
   Haengt an .article-cards am Komponenten-Root (setzt der Frontend-Controller: Team-Kontext ODER hinterlegte
   Archivseite -- damit auch /racing, Entscheid PW 2026-09-19), nicht mehr an body.team-area.
   Mobil Thumbnail links, ab 768px eine Karte pro Zeile mit Bild links (2/5) und Text rechts. Das Markup kommt
   unveraendert aus Component_Article_Multi_Archive; `display: contents` an Link und Bildhuelle laesst Bild, Datum,
   Titel und Teaser direkt im Karten-Grid landen, ohne das Template zu verzweigen.

   Die Bestandsoptik arbeitet mit festen Hoehen und absoluter Positionierung (h2: 80px + top: -15px, das Datum
   absolut in der Bildecke, .teaser ausgeblendet). Alle diese Regeln muessen hier ausdruecklich zurueckgenommen
   werden -- sonst ueberlagern sich Titel und Datum in der schmalen Karte.
--------------------------------------------------------------------------------------------------------------------- */
.component-article-archive.article-cards .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
}
/* Bootstrap-3-Clearfix (.row:before/:after mit content " ") wird im Grid zu
   einem eigenen Grid-Item und schob die erste Karte in die zweite Spalte
   (Staging 2026-09-19). Im Grid gibt es nichts zu clearen. */
.component-article-archive.article-cards .row::before,
.component-article-archive.article-cards .row::after {
    display: none;
    content: none;
}
.component-article-archive.article-cards .item {
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 12px;
    align-items: start;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    position: static;
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--team-radius);
    overflow: hidden;
}
.component-article-archive.article-cards .item > a,
.component-article-archive.article-cards .item .image {
    display: contents;
}
.component-article-archive.article-cards .item .teaser-image,
.l-sub .component-article-archive.article-cards .teaser-image {
    grid-column: 1;
    grid-row: 1 / span 3;
    height: 100%;
    min-height: 110px;
    width: auto;
    border-radius: 0;
    transform: none;
}
/* Kein Zoom beim Ueberfahren: in einer 110px-Spalte faellt er nicht auf,
   springt aber das Grid. */
.component-article-archive.article-cards .item:hover .teaser-image {
    transform: none;
}
.component-article-archive.article-cards .item a small {
    grid-column: 2;
    grid-row: 1;
    position: static;
    display: block;
    padding: 12px 12px 0 0;
    background: none;
    border-radius: 0;
    color: var(--ba-text-soft);
    font-size: 10px;
    font-weight: var(--ba-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.component-article-archive.article-cards .item h2 {
    grid-column: 2;
    grid-row: 2;
    position: static;
    top: auto;
    height: auto;
    margin: 4px 0;
    padding: 0 12px 0 0;
    background: none;
    border-radius: 0;
    overflow: visible;
    line-height: 1.35;
}
.component-article-archive.article-cards .item h2 a {
    font-size: 16px;
}
.component-article-archive.article-cards .item .teaser,
.l-sub .component-article-archive.article-cards .teaser {
    display: block;
    grid-column: 2;
    grid-row: 3;
    padding: 0 12px 12px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ba-text-soft);
}
/* Drei Zeilen Anrisstext, wie im Entwurf: die Teaser im Bestand sind
   Volltext-Absaetze und wuerden die Karte sonst auf Bildschirmhoehe ziehen.
   -webkit-line-clamp ist trotz Praefix in allen aktuellen Browsern die
   Standardschreibweise. */
/* Der Clamp haengt am Absatz, NICHT am .teaser: der Anrisstext steckt in
   einem eigenen <p>, und -webkit-line-clamp zaehlt nur die Zeilen des
   Elements, an dem es steht -- am .teaser waere das Kind eine einzige
   "Zeile" und es wuerde gar nichts gekuerzt. */
.component-article-archive.article-cards .item .teaser p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* NICHT alle Absaetze im Teaser ausblenden: der Anrisstext selbst steckt in
   einem <p>, nur der letzte Absatz ist der "Weiterlesen"-Link. Genau der
   soll weg -- die Karte ist ohnehin ganzflaechig verlinkt. */
.component-article-archive.article-cards .item .teaser p:last-child:has(a) {
    display: none;
}
.component-article-archive.article-cards .item .teaser p {
    margin: 0;
}
/* Die Ecke mit der Flagge gehoert zur Kartenoptik der Startseite. */
.component-article-archive.article-cards .item .flag {
    display: none;
}
/* Desktop: eine Karte pro Zeile, Bild links / Text rechts (Entscheid PW
   2026-09-19). Das Bild ist ein Div mit background-size: cover und fuellt die
   Kartenhoehe -- Beschnitt statt Verzerrung. */
@media (min-width: 768px) {
    .component-article-archive.article-cards .item {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        column-gap: 18px;
    }
    .component-article-archive.article-cards .item .teaser-image,
    .l-sub .component-article-archive.article-cards .teaser-image {
        grid-column: 1;
        grid-row: 1 / span 3;
        height: 100%;
        min-height: 200px;
        width: auto;
    }
    .component-article-archive.article-cards .item a small,
    .component-article-archive.article-cards .item h2,
    .component-article-archive.article-cards .item .teaser,
    .l-sub .component-article-archive.article-cards .teaser {
        grid-column: 2;
        padding-right: 16px;
    }
    .component-article-archive.article-cards .item a small { grid-row: 1; padding-top: 14px; }
    .component-article-archive.article-cards .item h2      { grid-row: 2; margin: 6px 0; }
    .component-article-archive.article-cards .item h2 a    { font-size: 18px; }
    .component-article-archive.article-cards .item .teaser { grid-row: 3; padding-bottom: 14px; font-size: 14px; }
    .component-article-archive.article-cards .item .teaser p {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }
}
/* "Mehr Artikel" statt Paginierung: zentriert unter den Karten; unter 768px
   ist .btn projektweit 100% breit. */
.component-article-archive .archive-more {
    margin: 16px 0 0;
    text-align: center;
}
/* Startseite Desktop: je Rubrik ein Link statt Paginierung (UX-Review U15) */
.component-article-archive .archive-sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin: 24px 0 8px;
}
.component-article-archive .archive-section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--ba-border-strong);
    border-radius: var(--ba-radius-pill);
    color: var(--ba-text-strong);
    font-weight: var(--ba-weight-bold);
    text-decoration: none;
}
.component-article-archive .archive-section-link span {
    color: var(--ba-link);
    font-weight: var(--ba-weight-regular);
}
.component-article-archive .archive-section-link:hover,
.component-article-archive .archive-section-link:focus-visible {
    border-color: var(--ba-link-hover);
    text-decoration: none;
}

/* Teams-Hub: Zeile auf dem Handy, Kacheln ab 900px (Entwurf C)
--------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .teams-hub-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .teams-hub-tile {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 14px;
        align-items: center;
        padding: 10px;
        border-radius: var(--team-radius);
    }
    .teams-hub-tile-image {
        aspect-ratio: 1 / 1;
        border-radius: 6px;
    }
    .teams-hub-tile-body {
        padding: 0;
        background: none;
    }
    .teams-hub-tile-body strong {
        font-size: 18px;
    }
    /* Auf der Zeile ist der Platz zu knapp fuer eine zweite Zeile Schrift. */
    .teams-hub-tile-cta {
        display: none;
    }
}
.team-schedule-note {
    background: var(--ba-surface-tint);
    border-left: 4px solid var(--ba-accent);
    border-radius: 0 6px 6px 0;
    padding: 12px 14px;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ba-text-soft);
}

/* Strava-Club-Teaser in der Sidebar (Roadmap #20)
   Ersetzt das Club-Widget fuer alle ohne Vereinsmitgliedschaft, Template
   frontend/component/iframe/strava_locked.tpl. Die Vorschau ahmt das Widget
   mit erfundenen Werten nach und ist nur leicht unscharf: grob lesbar, Namen
   sind Balken.
------------------------------------ */
.strava-locked {
    background: var(--ba-surface);
    border: 1px solid var(--ba-border);
    border-radius: var(--ba-radius-sm);
    overflow: hidden;
    margin: 0 0 30px;
}
.strava-locked .sl-preview {
    padding: 14px 14px 0;
    max-height: 215px;
    overflow: hidden;
    filter: blur(1.2px);
    user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
    mask-image: linear-gradient(to bottom, #000 65%, transparent);
}
.strava-locked .sl-head {
    padding: 0 0 8px;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--ba-border);
    font-size: 13px;
    line-height: 1.35;
    color: var(--ba-text-muted);
}
.strava-locked .sl-head strong {
    display: block;
    font-size: 15px;
    color: var(--ba-text-strong);
}
.strava-locked .sl-row {
    display: flex;
    gap: 10px;
    padding: 0 0 9px;
    margin: 0 0 9px;
    border-bottom: 1px solid var(--ba-border);
}
.strava-locked .sl-row b {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ba-border-strong);
    opacity: .6;
}
.strava-locked .sl-row span { flex: 1; min-width: 0; line-height: 1.3; }
.strava-locked .sl-row i {
    display: block;
    width: 45%;
    height: 7px;
    margin: 3px 0 5px;
    border-radius: 4px;
    background: var(--ba-border-strong);
}
.strava-locked .sl-row:nth-child(odd) i { width: 58%; }
.strava-locked .sl-row em {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    color: var(--ba-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.strava-locked .sl-row small {
    display: block;
    font-size: 12px;
    color: var(--ba-text-soft);
    white-space: nowrap;
}
.strava-locked .sl-panel {
    padding: 6px 16px 16px;
}
.strava-locked .sl-panel h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ba-text-strong);
    /* Ueberschriften trennen global per hyphens:auto, Safari machte daraus „Stra-va". */
    -webkit-hyphens: manual;
    hyphens: manual;
    text-wrap: balance;
}
.sidebar .strava-locked .sl-panel h3 img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
/* .btn-primary hat global 60 px Innenabstand seitlich, in der schmalen Sidebar
   lief der Text damit rechts aus dem Knopf. */
.strava-locked .sl-panel .btn {
    padding-left: 12px;
    padding-right: 12px;
    white-space: normal;
}
.strava-locked .sl-panel p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ba-text-soft);
}
.strava-locked .sl-panel small {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
}
/* Dark Mode — BikeAid Frontend
   Activated by: [data-theme="dark"] on <html>
   Toggled by: #dark-mode-toggle + localStorage('bikeaid-theme')
   screen.css bleibt unangetastet — nur Overrides hier.
--------------------------------------------------------------------------------------------------------------------- */

/* Smooth transitions on theme switch
--------------------------------------------------------------------------------------------------------------------- */
body,
.navbar .container,
.navbar-collapse,
.l-content,
.l-footer,
.mobile-subnav,
.mobile-mainnav,
.component-partner,
.component-partner-footer,
.sidebar .component-donations-counter,
.component-eventhighlight-sidebar .well,
.navbar-nav > li > ul,
.dropdown-menu {transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Dark Mode Toggle Button
   Layout (Position, Groesse, Paddings) steht komplett in screen.css beim
   Block "Utility-Icons" - hier nur der Mond/Sonne-Switch und die Farben.
--------------------------------------------------------------------------------------------------------------------- */
/* Light mode: Mond sichtbar, Sonne versteckt */
#dark-mode-toggle .icon-moon { display: block; }
#dark-mode-toggle .icon-sun  { display: none;  }

/* Dark mode: Sonne sichtbar, Mond versteckt */
[data-theme="dark"] #dark-mode-toggle {color: var(--ba-night-text);
    opacity: 0.75;
}
[data-theme="dark"] #dark-mode-toggle .icon-moon {display: none;
}
[data-theme="dark"] #dark-mode-toggle .icon-sun  {display: block;
}

/* Sprachwechsler (UCI-Pattern, Layout in screen.css) */
[data-theme="dark"] .lang-toggle {color: var(--ba-night-text);
}
[data-theme="dark"] .lang .dropdown-menu a {color: var(--ba-night-text);
}

/* Dark Mode Farb-Overrides
--------------------------------------------------------------------------------------------------------------------- */

/* HTML / Body */
[data-theme="dark"] {background-color: var(--ba-night-900);
    color-scheme: dark;
}
/* Der Wert faerbt zwei Dinge: den Overscroll-Bereich und — via Safari 26+ —
   die iOS-Statusleiste. Safari hat theme-color abgeschafft und nimmt seit 26
   die background-color von <body>; fixed Pseudo-Elemente werden dabei
   nachweislich ignoriert, <html> ebenfalls.
   Bewusst der Content-Ton (--ba-night-600, wie .l-content) und nicht die
   Erscheinung des Navbar-Glases (#334d5e ueber dem Hero): Safari sampelt nur
   einmal beim Laden, ein fester Wert kann also nur zu EINER Flaeche passen.
   Der Content gewinnt, weil man ihn beim Scrollen fast immer sieht — die
   Navbar dagegen nur am Seitenanfang.
   Folge: nach dem Theme-Toggle zieht die Statusleiste erst beim naechsten
   Aufruf nach. */
[data-theme="dark"] body {background-color: var(--ba-night-600);
    color: var(--ba-night-text);
}

/* Typografie */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {color: var(--ba-night-text-bright);
}
[data-theme="dark"] h1 a,
[data-theme="dark"] h2 a,
[data-theme="dark"] h3 a,
[data-theme="dark"] h4 a {color: var(--ba-night-text-bright);
}
[data-theme="dark"] h1.pagetitle,
[data-theme="dark"] h2.pagetitle {border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .component-article-show h1 {border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] hr {border-top-color: var(--ba-night-border);
    border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] p small {color: var(--ba-night-text-subtle);
}

/* Links */
[data-theme="dark"] a:link,
[data-theme="dark"] a:visited,
[data-theme="dark"] input[type="submit"].btn {color: var(--ba-white);
}
[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus,
[data-theme="dark"] a:active {color: var(--ba-night-link-active);
}

/* Navbar Container
   Glaston = Content-Ton --ba-night-600 (#1a2535), nicht night-700: sonst stehen
   Navbar, iOS-Statusleiste (Safari toent sie nach der fixen Navbar) und die
   Team-Tab-Leiste als zweites, dunkleres Blau ueber dem Inhalt (iPhone
   2026-09-29). Gleiche Regel wie im Light-Mode, dort ist das Glas weiss wie der
   Inhalt. Auch fuer .navbar-collapse.collapsing und .team-tabbar unten. */
[data-theme="dark"] .navbar .container {background-color: rgba(26,37,53,0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    border-radius: 4px 30px 30px 4px;
}
@media (max-width: 991px) {
    [data-theme="dark"] .navbar .container,
    [data-theme="dark"] .navbar.affix .container {border-radius: 0 0 30px 30px;
        background-color: rgba(26,37,53,0.72);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
}
}
[data-theme="dark"] .navbar.affix .container {background-color: rgba(26,37,53,0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
[data-theme="dark"] .navbar-toggle {color: var(--ba-night-text);
}
[data-theme="dark"] .user-avatar-circle {border-color: var(--ba-night-text);
}

/* Navbar Nav Links */
[data-theme="dark"] .navbar-nav > li > a {color: var(--ba-white);
}
[data-theme="dark"] .navbar-nav > li.active > a,
[data-theme="dark"] .navbar-nav > li > a:hover,
[data-theme="dark"] .navbar-nav > li > a:focus,
[data-theme="dark"] .navbar-nav > li > a:active {color: var(--ba-night-link);
    background: none;
}
[data-theme="dark"] .navbar-nav > li.active ul {border-left-color: var(--ba-blue-500);
}
[data-theme="dark"] .navbar-nav > li.active ul li a {color: var(--ba-night-text);
}

/* Mobile Navbar Collapse — nur wenn offen oder animierend; kein box-shadow (würde beim Schließen als Streifen aufblitzen) */
@media (max-width: 991px) {
    [data-theme="dark"] .navbar-collapse.in,
    [data-theme="dark"] .navbar-collapse.collapsing {background-color: rgba(26,37,53,0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
}
}

/* Navbar Cart */
[data-theme="dark"] #navbar-cart {color: var(--ba-night-text);
}

/* Navbar Search */
[data-theme="dark"] .navbar form button:hover {background-color: var(--ba-night-700);
}
/* Such-Overlay: Panel, Feld und Rand laufen ueber die Tokens, nur der
   Schleier wird dunkler, damit das Panel sich vom Nachtgrund abhebt. */
[data-theme="dark"] .search-overlay {background: rgba(5, 10, 15, 0.55);
}
[data-theme="dark"] .search-overlay form {box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
/* Gegen die allgemeine Formularregel weiter unten (input[type="search"],
   input:focus): das Feld bleibt durchsichtig auf dem Panel. */
[data-theme="dark"] .search-overlay input[type="search"],
[data-theme="dark"] .search-overlay input[type="search"]:focus {background-color: transparent;
    box-shadow: none;
}

/* Desktop Dropdown Subnav */
[data-theme="dark"] .navbar-nav > li > ul {background-color: var(--ba-night-600);
    border-color: var(--ba-night-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
[data-theme="dark"] .navbar-nav > li > ul > li {border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .navbar-nav > li > ul > li a:hover {background-color: var(--ba-night-700);
}

/* Login Dropdown */
[data-theme="dark"] .navbar .dropdown-menu {background-color: var(--ba-night-600);
    border-color: var(--ba-night-border);
}
[data-theme="dark"] .navbar .user .dropdown-menu {border-top-color: var(--ba-night-border);
}

/* Main Content Area */
[data-theme="dark"] .l-content {background-color: var(--ba-night-600);
}
[data-theme="dark"] .l-footer {background-color: var(--ba-night-600);
}

/* Sidebar Navigation */
[data-theme="dark"] .sidebar .nav li {border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .sidebar .nav li a {color: var(--ba-white);
}
[data-theme="dark"] .sidebar .nav li.active a,
[data-theme="dark"] .sidebar .nav li a:hover,
[data-theme="dark"] .sidebar .nav li a:focus,
[data-theme="dark"] .sidebar .nav li a:active {color: var(--ba-night-link-active);
}

/* Wells */
[data-theme="dark"] .well {border-color: var(--ba-night-border);
    background-color: var(--ba-night-700);
}
/* Welcome-Komponente: transparent lassen wie im Light Mode (Foto soll durchscheinen) */
[data-theme="dark"] .component-welcome .content.well {background: rgba(255,255,255,0);
    border-color: transparent;
    box-shadow: none;
}
[data-theme="dark"] .component-welcome .btn-secondary,
[data-theme="dark"] .component-welcome .btn-secondary:link,
[data-theme="dark"] .component-welcome .btn-secondary:visited {color: var(--ba-white);
}

/* Bootstrap Panels */
[data-theme="dark"] .panel {background-color: var(--ba-night-600);
    border-color: var(--ba-night-border);
}
[data-theme="dark"] .panel-heading {background-color: var(--ba-night-700) !important;
    border-bottom-color: var(--ba-night-border);
    color: var(--ba-night-text-bright);
}
[data-theme="dark"] .panel-body {background-color: var(--ba-night-600);
}
[data-theme="dark"] .panel-footer {background-color: var(--ba-night-700);
    border-top-color: var(--ba-night-border);
}

/* Formulare */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {background-color: var(--ba-night-700);
    border-color: var(--ba-night-border);
    color: var(--ba-night-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {background-color: var(--ba-night-700);
    border-color: var(--ba-blue-500);
    color: var(--ba-night-text);
    box-shadow: 0 0 3px rgba(71,137,190,0.4);
}
/* Bootstraps .help-block (#737373) kam auf --ba-night-600 nur auf 3,3:1. */
[data-theme="dark"] .help-block {color: var(--ba-night-text-muted);
}
[data-theme="dark"] .well-filedrop {background-color: var(--ba-night-700);
    border-color: var(--ba-night-border);
}
[data-theme="dark"] .component-profile-settings .btn-info {background-color: var(--ba-night-600);
}

/* Tabellen */
[data-theme="dark"] table {color: var(--ba-night-text);
}
[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > th {background-color: var(--ba-night-700);
    border-bottom-color: var(--ba-night-border);
    color: var(--ba-night-text-bright);
}
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tfoot > tr > td {border-top-color: var(--ba-night-border);
    color: var(--ba-night-text);
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {background-color: var(--ba-night-700);
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {background-color: var(--ba-night-600);
}
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered > thead > tr > th,
[data-theme="dark"] .table-bordered > tbody > tr > td {border-color: var(--ba-night-border);
}
[data-theme="dark"] .table-hover > tbody > tr:hover {background-color: #1e2f45;
}

/* Pager / Pagination */
[data-theme="dark"] .pager li span {border-color: var(--ba-night-border);
    color: var(--ba-night-text-subtle);
}

/* Thumbnail Caption */
[data-theme="dark"] .thumbnail.caption {background-color: var(--ba-night-700);
}

/* Artikel-Teaser */
[data-theme="dark"] .component-article-archive .item h2 {background-color: var(--ba-night-600);
}
[data-theme="dark"] .component-article-archive .highlight h2 a,
[data-theme="dark"] .component-article-archive .item h2 a,
[data-theme="dark"] .component-article-archive p a {color: var(--ba-white);
}
[data-theme="dark"] .component-article-archive .highlight h2 a:hover,
[data-theme="dark"] .component-article-archive .highlight h2 a:focus,
[data-theme="dark"] .component-article-archive .item h2 a:hover,
[data-theme="dark"] .component-article-archive .item h2 a:focus,
[data-theme="dark"] .component-article-archive p a:hover,
[data-theme="dark"] .component-article-archive p a:focus {color: var(--ba-night-link-active);
}
[data-theme="dark"] .component-article-archive .teaser-image {background-color: var(--ba-night-700);
}
[data-theme="dark"] .component-article-archive .highlight small {border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .results.list-unstyled > li {border-bottom-color: var(--ba-night-border);
}

/* Spotify Mobile Layout — Dark Mode */
[data-theme="dark"] .l-start .spotify-section {border-bottom-color: #1e2e3e;
}
[data-theme="dark"] .l-start .spotify-section-title {color: var(--ba-night-text);
}
[data-theme="dark"] .l-start .spotify-section-more {color: var(--ba-night-link-active);
}
[data-theme="dark"] .l-start .spotify-card-image {background-color: var(--ba-night-700);
}
[data-theme="dark"] .l-start .spotify-card-title {color: var(--ba-white);
}

/* Sitemap */
[data-theme="dark"] .component-sitemap .nav > li > a {background-color: var(--ba-night-600);
    color: var(--ba-night-link);
}
[data-theme="dark"] .component-sitemap .nav > li > a:hover {background-color: var(--ba-night-700);
}

/* Events */
[data-theme="dark"] .component-event-list .item {border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .component-related-events .item {border-bottom-color: var(--ba-night-border);
}

/* Kalender */
[data-theme="dark"] .component-calendar table tr td.today,
[data-theme="dark"] .component-calendar table tr td:hover {background-color: var(--ba-night-500);
}

/* Event Sidebar Highlights */
[data-theme="dark"] .component-eventhighlight-sidebar .well {background-color: var(--ba-night-600);
    border-color: var(--ba-night-border);
}
[data-theme="dark"] .component-eventhighlight-sidebar .well h3 {color: var(--ba-white);
}

/* Forum */
[data-theme="dark"] .component-forum .item {border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .component-forum .thread-item .heads {background-color: var(--ba-night-600);
}
[data-theme="dark"] .component-forum .highlight {background-color: #1e2e45 !important;
}
[data-theme="dark"] .component-forum .highlight .heads {background-color: #1e3550 !important;
}

/* Teilnehmerliste */
[data-theme="dark"] .participant-list img {border-color: var(--ba-night-border);
}
[data-theme="dark"] .participant-list a.biker,
[data-theme="dark"] .participant-list a.biker:hover,
[data-theme="dark"] .participant-list a.biker:visited {color: var(--ba-night-text);
}

/* Partner / Sponsoren */
[data-theme="dark"] .component-partner {background-color: var(--ba-night-600);
}
[data-theme="dark"] .component-partner-footer {background-color: var(--ba-night-600);
}

/* Spendenzähler Sidebar */
[data-theme="dark"] .sidebar .component-donations-counter {background-color: var(--ba-night-600);
    border-color: var(--ba-night-border);
    color: var(--ba-night-text);
}
[data-theme="dark"] .sidebar .component-donations-counter h2,
[data-theme="dark"] .sidebar .component-donations-counter p,
[data-theme="dark"] .sidebar .component-donations-counter .donation {color: var(--ba-night-text);
}

/* Suchergebnis-Markierung */
[data-theme="dark"] .component-fulltext-simple mark {background-color: rgba(122,179,217,0.2);
}

/* Mobile Subnav Strip */
[data-theme="dark"] .mobile-subnav {background-color: var(--ba-night-600);
    border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .mobile-subnav .nav li.active a {border-bottom-color: var(--ba-night-link);
}
[data-theme="dark"] .mobile-subnav-wrap::before {background: linear-gradient(to left, transparent, var(--ba-night-600));
}
[data-theme="dark"] .mobile-subnav-wrap::after {background: linear-gradient(to right, transparent, var(--ba-night-600));
}

/* Mobile Main Nav Strip */
[data-theme="dark"] .mobile-mainnav .nav li a {color: var(--ba-white);
}
[data-theme="dark"] .mobile-mainnav .nav li.active > a {color: var(--ba-white);
    background-color: var(--ba-primary);
    border-color: var(--ba-night-blue);
    /* Gestaffelt wie im Light-Theme (screen.css), nur kraeftiger — auf dem
       dunklen Grund faellt ein harter Schatten-Abriss staerker auf.
       Radien identisch, damit nichts am Scroll-Container geclippt wird. */
    box-shadow:
        0 0 3px rgba(45, 106, 159, 0.50),
        0 0 8px rgba(45, 106, 159, 0.32),
        0 0 16px rgba(45, 106, 159, 0.18),
        0 0 24px rgba(45, 106, 159, 0.09);
}
/* Social Icons Desktop */
[data-theme="dark"] .social-icons-large .social-box {background-color: rgba(20,32,48,0.9);
}
[data-theme="dark"] .social-icons-large .social-box.fb-wrap:hover .fb-links a:hover,
[data-theme="dark"] .social-icons-large .social-box.ig-wrap:hover .ig-links a:hover {color: #e08080;
}

/* Reading progress bar — dark mode */
[data-theme="dark"] #reading-progress-bar {background: linear-gradient(to right, var(--ba-blue-500), #6aaee0);
}

/* .big-header / .small-header: auf Body-Hintergrund setzen, damit der Navbar-Container sichtbar abhebt */
[data-theme="dark"] .big-header,
[data-theme="dark"] .small-header {background-color: var(--ba-night-900);
}

/* Rounding SVG — white fill umfärben auf Content-Hintergrund (var(--ba-night-600))
   Filter-Kette: brightness→sepia→saturate→hue-rotate→brightness */
[data-theme="dark"] img.rounding {filter: brightness(0.21) sepia(1) saturate(2) hue-rotate(175deg) brightness(0.56);
}

/* Footer */
[data-theme="dark"] body.has-tabbar .component-partner {border-bottom-color: #080e16;}
[data-theme="dark"] footer {background-color: #080e16;
}

/* Cookie Consent */
[data-theme="dark"] #cookieconsent-container {background-color: #080e16 !important;
}

/* Pagination */
[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span {background-color: var(--ba-night-600);
    border-color: #2e4060;
    color: #a8c4e0;
}
[data-theme="dark"] .pagination > li > a:hover,
[data-theme="dark"] .pagination > li > span:hover,
[data-theme="dark"] .pagination > li > a:focus,
[data-theme="dark"] .pagination > li > span:focus {background-color: #243347;
    border-color: var(--ba-blue-500);
    color: var(--ba-gold-500);
}
[data-theme="dark"] .pagination > .active > a,
[data-theme="dark"] .pagination > .active > span,
[data-theme="dark"] .pagination > .active > a:hover,
[data-theme="dark"] .pagination > .active > span:hover {background-color: var(--ba-blue-600);
    border-color: var(--ba-blue-600);
    color: var(--ba-white);
}
[data-theme="dark"] .pagination > .disabled > a,
[data-theme="dark"] .pagination > .disabled > span {background-color: #111923;
    border-color: #1e2d40;
    color: #3a4e63;
}

/* Floating Labels (#4). Aktiv/gefuellt sitzt das Label ueber dem Feld auf
   --ba-night-600: --ba-blue-500 kam bei 11px nur auf 4,1:1, blue-300 auf 5,6:1. */
[data-theme="dark"] .formo-input > .control-label,
[data-theme="dark"] .formo-password > .control-label,
[data-theme="dark"] .formo-textarea > .control-label {color: var(--ba-text-subtle);
}
[data-theme="dark"] .formo-input.fl-active > .control-label,
[data-theme="dark"] .formo-input.fl-filled > .control-label,
[data-theme="dark"] .formo-password.fl-active > .control-label,
[data-theme="dark"] .formo-password.fl-filled > .control-label,
[data-theme="dark"] .formo-textarea.fl-active > .control-label,
[data-theme="dark"] .formo-textarea.fl-filled > .control-label {color: var(--ba-blue-300);
}
/* Select-Label im Registrierungsraster (screen.css .reg-row) sitzt immer oben. */
[data-theme="dark"] .reg-row .formo-select > .control-label {color: var(--ba-blue-300);
}
[data-theme="dark"] .formo-input.fl-active .form-control,
[data-theme="dark"] .formo-password.fl-active .form-control,
[data-theme="dark"] .formo-textarea.fl-active .form-control {border-color: var(--ba-blue-500);
}

/* ============================================================
   Welle 1 — Dark-Mode-Pendants
   ============================================================ */

/* Event-Status-Tags */
[data-theme="dark"] .component-event-list .item .category {background: var(--ba-night-border);
    color: var(--ba-night-text);
}
[data-theme="dark"] .component-event-list .item .category.category-mtb            {background: #1f3a1a; color: #a8d99a;
}
[data-theme="dark"] .component-event-list .item .category.category-pro-cycling,
[data-theme="dark"] .component-event-list .item .category.category-pro            {background: #4a1816; color: #f5b3b3;
}
[data-theme="dark"] .component-event-list .item .category.category-ctf-rtf,
[data-theme="dark"] .component-event-list .item .category.category-ctf            {background: #3a2a08; color: #f5d59a;
}
[data-theme="dark"] .component-event-list .item .category.category-rr,
[data-theme="dark"] .component-event-list .item .category.category-rennrad        {background: var(--ba-night-500);
}
[data-theme="dark"] .component-event-list .item .category.category-community      {background: var(--ba-night-600);
}
[data-theme="dark"] .component-event-list .item .category.category-partner-mitglieder,
[data-theme="dark"] .component-event-list .item .category.category-partner-foerderer {background: #2a2418; color: #d8c79a;
}

/* Pagination-Bar */
[data-theme="dark"] .component-pagination .pager li > a {background: var(--ba-night-600);
    color: var(--ba-night-text);
    border-color: var(--ba-night-border-alt);
}
[data-theme="dark"] .component-pagination .pager li > a:hover {background: var(--ba-night-700);
    color: var(--ba-night-link);
    border-color: var(--ba-blue-500);
}
[data-theme="dark"] .component-pagination .pager li > span {color: var(--ba-text-subtle);
}

/* Role-Badges */
[data-theme="dark"] .role-badge {background: var(--ba-night-500);
    color: var(--ba-night-text);
}
[data-theme="dark"] .role-badge--pro {background: #4a1816; color: #f5b3b3;
}
[data-theme="dark"] .role-badge--ctf {background: #3a2a08; color: #f5d59a;
}
[data-theme="dark"] .role-badge--mtb {background: #1f3a1a; color: #a8d99a;
}

/* ============================================================
   Welle 2 — Saison-Pass + Profile Pill-Tabs (Dark Mode)
   ============================================================ */
[data-theme="dark"] .saison-pass {background: linear-gradient(135deg, var(--ba-night-600) 0%, var(--ba-night-800) 100%);
    border-color: var(--ba-night-border);
    border-left-color: var(--ba-red-600);
}
/* .sp-name, .sp-meta, .sp-meta strong, .sp-since: kein Override mehr noetig —
   screen.css nutzt dort --ba-text-strong / --ba-text-label / --ba-text-muted,
   die tokens.css im Dark Mode selbst umhaengt. */
[data-theme="dark"] .sp-stat-lbl {color: #e8eef5;
}
[data-theme="dark"] .sp-role {background: var(--ba-night-500); color: var(--ba-night-text);
}
[data-theme="dark"] .sp-role.pro {background: var(--ba-red-600); color: var(--ba-white);
}
[data-theme="dark"] .sp-qr-link {background: var(--ba-night-500); color: var(--ba-night-text);
    border-color: var(--ba-night-border);
}
[data-theme="dark"] .sp-qr-link:hover,
[data-theme="dark"] .sp-qr-link:focus {background: var(--ba-blue-500); color: var(--ba-white);
    border-color: var(--ba-blue-500);
}

[data-theme="dark"] .profile-tabs .pt-tab:hover {background: #243245;
}
[data-theme="dark"] .profile-tabs .pt-tab.is-active {background: var(--ba-blue-500); color: var(--ba-white);
}

/* ----- FAQ (Tab "Hilfe" + Einsteiger-Hinweis) ----- */
[data-theme="dark"] .faq-group-title {color: var(--ba-red-300);
}
[data-theme="dark"] .faq-item {border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .faq-item:first-child {border-top-color: var(--ba-night-border);
}
[data-theme="dark"] .faq-item > summary::after {color: var(--ba-night-link);
}
[data-theme="dark"] .faq-item > summary:hover {color: var(--ba-night-link);
}
[data-theme="dark"] .faq-nudge {background: var(--ba-night-700); border-color: var(--ba-night-border);
    border-left-color: var(--ba-red-600);
}
[data-theme="dark"] .faq-nudge-close:hover {background: var(--ba-night-600);
}

/* ============================================================
   Welle 2.5 — Profile-Page-Inhalt (Dark Mode)
   ============================================================ */
[data-theme="dark"] .kontouebersicht .pic-placeholder {background: var(--ba-night-700); border-color: var(--ba-night-border); color: var(--ba-night-link);
}

/* Benefits */
[data-theme="dark"] .benefit-card {background: var(--ba-night-600); border-color: #283649;
}
[data-theme="dark"] .benefit-card:hover {border-color: #3a5170;
}
[data-theme="dark"] .benefit-card .bc-icon {background: rgba(26,138,58,0.18);
}
[data-theme="dark"] .benefit-card.upgrade .bc-icon {background: rgba(245,194,0,0.15); color: var(--ba-gold-500);
}
[data-theme="dark"] .benefit-card.upgrade .bc-status {color: var(--ba-gold-500);
}

/* Termine */
[data-theme="dark"] .mc-card {background: var(--ba-night-600); border-color: var(--ba-night-border);
}
[data-theme="dark"] .mc-date {background: var(--ba-night-800);
}
/* .mc-date .d und .mc-body h3 kommen ueber --ba-text-strong. */
[data-theme="dark"] .mc-act {background: var(--ba-night-border); color: #cfe0f0;
}
[data-theme="dark"] .mc-act.primary {background: var(--ba-blue-500); color: var(--ba-white);
}
[data-theme="dark"] .mc-act.danger {background: transparent; color: #ff8784;
}
[data-theme="dark"] .mc-status .dot {background: #44566e;
}
[data-theme="dark"] .mc-ticket {background: var(--ba-night-800); border-color: var(--ba-night-border);
}
[data-theme="dark"] .mc-ticket:hover {background: #16273a; border-color: var(--ba-blue-500);
}
[data-theme="dark"] .mc-ticket-cta {color: #7fb4e0;
}
[data-theme="dark"] .mc-qr {background: var(--ba-white); border-color: var(--ba-white);
}

/* Footer */
[data-theme="dark"] .el-card {background: var(--ba-night-600); border-color: var(--ba-night-border);
}
/* .el-title (--ba-text-strong) und .pt-note (--ba-text-muted) schalten
   inzwischen ueber die Tokens; .pt-note wird dadurch sogar heller. */

/* Dark: Social-Strip */
[data-theme="dark"] .social-strip__rail {border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .social-strip__label {color: var(--ba-gold-500);
}
@media (max-width: 767px) {
    [data-theme="dark"] .social-strip__label {color: var(--ba-night-text);
}
}
[data-theme="dark"] .social-strip__cta {color: #ff79b0;
}
[data-theme="dark"] .social-strip__cta:hover {color: #ffb3d4;
}
[data-theme="dark"] .sp-card {background: var(--ba-night-600);
    border-color: var(--ba-night-border);
    color: #d8e0ea;
}
[data-theme="dark"] .sp-card:hover {border-color: #3d5170;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .sp-handle {color: var(--ba-white);
}
[data-theme="dark"] .sp-meta {color: #8a9aae;
}
[data-theme="dark"] .sp-caption {color: #cdd5e0;
}
[data-theme="dark"] .sp-stats {color: #8a9aae;
    border-top-color: var(--ba-night-border);
}

/* Dark: Social-Hub Pills */
[data-theme="dark"] .social-hub__pill {background: var(--ba-night-600);
    color: #cfe0f0;
    border-color: var(--ba-night-border-alt);
}
[data-theme="dark"] .social-hub__pill:hover {opacity: 0.85;
}
[data-theme="dark"] .social-hub__pill.is-active {color: var(--ba-white);
    box-shadow: 0 0 12px rgba(45, 106, 159, 0.4);
}
[data-theme="dark"] .social-hub__pill--all.is-active {background-color: var(--ba-blue-600);
    border-color: var(--ba-blue-600);
    box-shadow: 0 0 12px rgba(29, 92, 142, 0.55);
}

/* Component_Social_Strip Wrapper — Dark Mode
--------------------------------------------------------------------------------------------------------------------- */
[data-theme="dark"] .social-strip-section__title {color: #4ea7e8;
}

/* Text-Komponenten-Tabellen — Dark Mode
--------------------------------------------------------------------------------------------------------------------- */
[data-theme="dark"] .component-text table th {background: var(--ba-night-blue);
}
[data-theme="dark"] .component-text table td {border-top-color: #2c3138;
}
[data-theme="dark"] .component-text table tbody tr:nth-child(even) {background: #142030;
}

/* Teams-Hub Kacheln — Dark Mode
--------------------------------------------------------------------------------------------------------------------- */
[data-theme="dark"] .teams-hub-tile {background: #1e2227;
    border-color: #2c3138;
}
[data-theme="dark"] .teams-hub-tile:hover,
[data-theme="dark"] .teams-hub-tile:focus {box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .teams-hub-tile-image {background: #11151a;
}
[data-theme="dark"] .teams-hub-tile-body {background: #142030;
}
[data-theme="dark"] .teams-hub-tile-body strong {color: #4ea7e8;
}
[data-theme="dark"] .teams-hub-tile-text {color: #a8b0b8;
}
[data-theme="dark"] .teams-hub-tile-cta {color: #e2e5ea;
}
[data-theme="dark"] .teams-hub-tile:hover .teams-hub-tile-cta {color: var(--ba-night-link-active);
}

/* Team-Roster (Racing Riders) — Dark Mode
--------------------------------------------------------------------------------------------------------------------- */
[data-theme="dark"] .team-roster-card {background: #1e2227;
    border-color: #2c3138;
    color: #d8dde3;
}
[data-theme="dark"] .team-roster-card:hover,
[data-theme="dark"] .team-roster-card:focus {box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .team-roster-card-image {background: #11151a;
}
[data-theme="dark"] .team-roster-card-name {color: #4ea7e8;
}
[data-theme="dark"] .team-roster-card-city,
[data-theme="dark"] .team-roster-card-bio {color: #a8b0b8;
}
[data-theme="dark"] .team-roster-badge-discipline {background: var(--ba-night-blue);
}
[data-theme="dark"] .team-roster-badge-season,
[data-theme="dark"] .team-roster-badge-nat,
[data-theme="dark"] .team-roster-badge-club {background: #3a4048;
    color: #e2e5ea;
}
[data-theme="dark"] .team-roster-card-position {color: #d8dde3;
}
[data-theme="dark"] .team-roster-detail-block {background: #1e2227;
    border-color: #2c3138;
}
[data-theme="dark"] .team-roster-detail-block h2,
[data-theme="dark"] .team-roster-detail-headline h1 {color: #4ea7e8;
}
[data-theme="dark"] .team-roster-detail-bio {color: #a8b0b8;
}
[data-theme="dark"] .team-roster-stat {background: #1e2227;
    border-color: #2c3138;
}
[data-theme="dark"] .team-roster-stat-label {color: #a8b0b8;
}
[data-theme="dark"] .team-roster-stat-value {color: #4ea7e8;
}
[data-theme="dark"] .team-roster-detail-links li a {background: var(--ba-night-blue);
}
[data-theme="dark"] .team-roster-detail-links li a:hover,
[data-theme="dark"] .team-roster-detail-links li a:focus {background: var(--ba-blue-600);
}

/* ============================================================
   Welle 2.3 — Mitglieder-Verzeichnis + Profileinstellungen (Dark Mode)
   ============================================================ */
[data-theme="dark"] .biker-table thead th {color: var(--ba-night-text-muted);
    border-bottom-color: var(--ba-night-border);
}
[data-theme="dark"] .biker-table tbody tr:hover {background: var(--ba-night-600);
}
[data-theme="dark"] .biker-table .bt-names strong {color: var(--ba-white);
}
[data-theme="dark"] .biker-table .bt-realname {color: var(--ba-night-text-muted);
}
[data-theme="dark"] .biker-table .bt-setup {color: var(--ba-night-text-subtle);
}
[data-theme="dark"] .biker-table .bt-avatar {background: var(--ba-night-700);
}
[data-theme="dark"] .biker-table .bt-avatar--none {box-shadow: inset 0 0 0 1px var(--ba-night-border);
}
[data-theme="dark"] .biker-table .bt-region,
[data-theme="dark"] .biker-table .bt-club {color: var(--ba-night-text);
}
[data-theme="dark"] .bt-tag {background: var(--ba-night-500); color: var(--ba-night-text-bright);
}
[data-theme="dark"] .bt-day {background: var(--ba-night-700); color: var(--ba-night-text);
}
[data-theme="dark"] .component-biker-list .bl-lede {color: var(--ba-night-text-muted);
}
[data-theme="dark"] .biker-table .bt-since,
[data-theme="dark"] .biker-table .bt-goals {color: var(--ba-night-text-muted);
}
[data-theme="dark"] .bd-setup,
[data-theme="dark"] .bd-goals {color: var(--ba-night-text);
}
[data-theme="dark"] .component-profile-settings .ps-block legend {color: var(--ba-white);
}
[data-theme="dark"] .component-profile-settings .ps-hint {color: var(--ba-night-text-muted);
}
[data-theme="dark"] .component-profile-settings .ps-master {background: var(--ba-night-700);
    border-left-color: var(--ba-red-600);
}
[data-theme="dark"] .component-profile-settings .ps-master .control-label {color: var(--ba-night-text-bright);
}
[data-theme="dark"] .component-profile-settings .ps-master-note,
[data-theme="dark"] .component-profile-settings .ps-savebar-note {color: var(--ba-night-text-muted);
}
[data-theme="dark"] .component-profile-settings .ps-subs {border-left-color: var(--ba-night-border);
}
[data-theme="dark"] .component-profile-settings .ps-help {background: var(--ba-night-500);
    color: var(--ba-night-text-bright);
}
[data-theme="dark"] .component-profile-settings .ps-help:hover,
[data-theme="dark"] .component-profile-settings .ps-help:focus {background: var(--ba-blue-600);
    color: var(--ba-white);
}
[data-theme="dark"] .component-profile-settings .ps-inline-note {color: var(--ba-night-text-muted);
}
[data-theme="dark"] .component-profile-settings .ps-inline-note strong {color: var(--ba-night-text);
}
/* Die Leiste liegt auf .l-content, muss also deren Flaeche treffen -- sonst
   scheint der Formularinhalt beim Scrollen durch. */
[data-theme="dark"] .component-profile-settings .ps-savebar {background: var(--ba-night-600);
    border-top-color: var(--ba-night-border);
}
[data-theme="dark"] .component-profile-settings .ps-savebar.is-stuck {box-shadow: 0 -6px 14px rgba(0,0,0,0.45);
}


/* Popover (2026-08-01)
----------------------------------------------------------------------------------------------------------------------
   Bootstrap-Popover hat eine fest helle Flaeche, erbt aber die
   Dark-Mode-Textfarbe -- hellgrau auf weiss, praktisch unlesbar. Bis hierher
   gab es in dieser Datei keine .popover-Regel. */

[data-theme="dark"] .popover {
    background: #142030;
    border-color: #2a3a50;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .popover-title {
    background: #1a2535;
    border-bottom-color: #2a3a50;
    color: #e0eaf5;
}
[data-theme="dark"] .popover-content { color: #c8d8e8; }

[data-theme="dark"] .popover.top    > .arrow::after { border-top-color:    #142030; }
[data-theme="dark"] .popover.bottom > .arrow::after { border-bottom-color: #1a2535; }
[data-theme="dark"] .popover.left   > .arrow::after { border-left-color:   #142030; }
[data-theme="dark"] .popover.right  > .arrow::after { border-right-color:  #142030; }
[data-theme="dark"] .popover.top    > .arrow { border-top-color:    #2a3a50; }
[data-theme="dark"] .popover.bottom > .arrow { border-bottom-color: #2a3a50; }
[data-theme="dark"] .popover.left   > .arrow { border-left-color:   #2a3a50; }
[data-theme="dark"] .popover.right  > .arrow { border-right-color:  #2a3a50; }


/* Mitgliedsantrag (2026-08-01) */

[data-theme="dark"] .component-biker-member-application h2 { border-top-color: #2a3a50; }
[data-theme="dark"] .component-biker-member-application .formo-select > .control-label { color: #76a0c4; }
[data-theme="dark"] .component-biker-member-application .formo-radios label.radio,
[data-theme="dark"] .component-biker-member-application .pkg-item,
[data-theme="dark"] .component-biker-member-application .fee-box,
[data-theme="dark"] .component-biker-member-application .fee-box .fee-total { border-color: #2a3a50; }
[data-theme="dark"] .component-biker-member-application .fee-youth { color: var(--ba-success-text); }

/* Shop-Bestseller + Rabattcodes (2026-08-29)
   Hier steht bewusst NICHTS. Beide Bloecke in screen.css benutzen
   ausschliesslich Tokens (--ba-surface, --ba-border, --ba-text-*, --ba-shadow,
   --ba-danger), und die schaltet tokens.css unter [data-theme="dark"] schon um.
   Eine Kopie der Farben an dieser Stelle waere ein zweiter Ort fuer denselben
   Fakt -- und genau so war hier der Rohwert #4ea7e8 hereingeraten, den es in
   tokens.css gar nicht gibt.

   Einzige Sonderregel ist die Bildflaeche: sie steht auf --ba-white und muss in
   BEIDEN Themes hell bleiben, weil die Produktbilder Freisteller mit
   transparentem Hintergrund sind. Das erledigt screen.css von selbst --
   --ba-white ist ein Primitive und schaltet nicht um. */

/* Roh-Farben aus screen.css, die im Dark Mode durchschlagen (2026-09-13)
   -------------------------------------------------------------------
   Ermittelt, nicht geschaetzt: alle Vorder-/Hintergrundfarben in screen.css
   ohne var() und ohne Gegenstueck hier wurden gegen --ba-surface (#1a2535)
   gerechnet. Von 38 Fundstellen blieben 12 uebrig -- Kontrast unter 4.5:1
   oder eine helle Flaeche auf dunkler Seite. Der Rest ist entweder dunkel
   genug oder bewusst fix (Instagram-/Facebook-Verlauf, farbige Toasts,
   weisse Overlays auf Bildern).

   Gegenstueck zu den Werten steht jeweils in tokens.css unter
   [data-theme="dark"] -- hier nur die Zuordnung, keine neuen Rohwerte. */

/* Formular-Meldungen: helle Pastellflaeche mit dunklem Text. Im Dark Mode
   zwei Fehler auf einmal -- leuchtender Block UND 2.6:1 Textkontrast. */
[data-theme="dark"] .notice.alert-error,
[data-theme="dark"] .notice.alert-danger {
	color: var(--ba-error-text);
	background-color: var(--ba-error-bg);
	border-color: var(--ba-error-text);
}
[data-theme="dark"] .notice.alert-danger a { color: var(--ba-error-text); }
[data-theme="dark"] .notice.alert-notice {
	color: var(--ba-warning-text);
	background-color: var(--ba-warning-bg);
	border-color: var(--ba-warning-text);
}

/* Kalender, heutiger Tag: #103a5c auf dunklem Grund sind 1.3:1 -- praktisch
   unsichtbar, ausgerechnet auf der Zelle, die herausstechen soll. */
[data-theme="dark"] .component-calendar table tr td.today a { color: var(--ba-text-strong); }

/* Teilnehmerzahl an den Startseiten-Terminen: #666 sind 2.7:1. */
[data-theme="dark"] .component-events-start .badge.users { color: var(--ba-text-muted); }

/* Benefits-Karten im Konto: gruener Status 3.5:1, die Pending-Karte
   zusaetzlich eine hellgraue Flaeche (#eef2f6) mit grauem Text darauf. */
[data-theme="dark"] .benefit-card .bc-status { color: var(--ba-success-text); }
[data-theme="dark"] .benefit-card.pending .bc-icon {
	background: var(--ba-surface-2);
	color: var(--ba-text-muted);
}
[data-theme="dark"] .benefit-card.pending .bc-status { color: var(--ba-text-muted); }

/* Mitgliedskarte, Kennzeichnung „ctf": #5a4400 sind 1.7:1. */
[data-theme="dark"] .mc-tag.ctf { color: var(--ba-warning-text); }

/* Team-Bereiche (Entwurf C, 2026-09-18)
   ---------------------------------------------------------------------------------------------------------------------
   Fast alles im Block laeuft ueber die Semantik-Tokens und schaltet damit von selbst um. Hier stehen nur die zwei
   Stellen mit fest eingebauten Farbwerten.
--------------------------------------------------------------------------------------------------------------------- */
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
    [data-theme="dark"] .team-tabbar {background: rgba(26, 37, 53, 0.72);
        border-color: rgba(255, 255, 255, 0.08);
    }
}
[data-theme="dark"] .team-tabbar {box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .team-tabbar .team-tab.is-active {background: rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-transparency: reduce) {
    [data-theme="dark"] .team-tabbar {background: var(--ba-night-600);
    }
}
[data-theme="dark"] .team-sheet {box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.55);
}
/* Karten-Titel: die Bestandsregel fuer .item h2 (Zeile ~285) ist spezifischer
   als das background: none der Karten und legte im Dark Mode einen Balken
   hinter den Titel (2026-09-19). */
[data-theme="dark"] .component-article-archive.article-cards .item h2 {background: none;
}
/* BIKE AID Barrierefreiheit: Untergrenzen fuer beide Themes
   ---------------------------------------------------------------------------------------------------------------------
   Aus dem UX-Review vom 2026-10-17 (docs/ux-review-2026-10-17.md, U18-U21). Geladen nach screen.css und dark.css,
   gewinnt also bei gleicher Spezifitaet.

   Farben stehen NICHT hier, sondern in tokens.css: Kontrast wird an der Quelle geloest, nicht pro Komponente.
   Hier steht nur, was als Untergrenze fuer alle Komponenten gilt:
     1. Sprunglink und Ziel <main id="inhalt">
     2. Links im Fliesstext sind unterstrichen, nicht nur farbig (WCAG 1.4.1)
     3. Schrift nicht unter 12 px
     4. Tap-Ziele mindestens 24 px (WCAG 2.5.8), wo es geht 44 px

   Wer in screen.css eine Groesse unter diese Grenzen setzt, wird hier ueberstimmt. Das ist Absicht: so bleibt die
   Grenze an einer Stelle sichtbar, statt in 40 Komponenten-Regeln verstreut zu sein.
   --------------------------------------------------------------------------------------------------------------------- */

/* 1. Sprunglink (header.tpl) und sein Ziel
   ------------------------------------------------------------------------------------------------------------------ */
.skip-link {
    position: absolute;
    top: -200px;
    left: 16px;
    z-index: calc(var(--ba-z-toast) + 1);
    padding: 12px 20px;
    border-radius: var(--ba-radius);
    background: var(--ba-blue-900);
    color: var(--ba-white);
    font-weight: var(--ba-weight-bold);
    text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 16px;
    color: var(--ba-white);
    outline: 3px solid var(--ba-focus-ring);
    outline-offset: 2px;
}
/* <main tabindex="-1"> nimmt nach dem Sprung den Fokus; ein Rahmen um die ganze
   Seite waere nur Laerm. */
main:focus {
    outline: none;
}

/* 2. Links im Fliesstext
   Redaktionelle Texte (Text-Komponente, Artikel, Hinweise). axe meldete auf der
   Datenschutzseite 240 Links, die sich nur durch die Farbe abheben (Rot auf
   Dunkelblau 1,54:1). Buttons, Kacheln und Navigation bleiben ohne Strich.
   ------------------------------------------------------------------------------------------------------------------ */
.component-text :is(p, li, td, dd) a:not(.btn),
.component-article-show :is(p, li, td, dd) a:not(.btn),
.component-event-detail :is(p, li, td, dd) a:not(.btn),
.component-gps p a:not(.btn),
.help-block a:not(.btn),
.bl-lede a:not(.btn),
.alert a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Aus Pages/PDF eingefuegte CMS-Texte bringen teils einen weissen Hintergrund
   als Inline-Style mit (/en/community/become_a_member). Im Dunkeln stand die
   helle Schrift dann auf Weiss (1,45:1). Keine Palettenfarbe, deshalb hier und
   nicht in tokens.css; !important, weil nur so ein style-Attribut zu schlagen ist. */
[data-theme="dark"] .component-text [style*="background-color"] {
    background-color: transparent !important;
}

/* Partner-Logos im Footer stehen seit U19 in <li> (list_partner.tpl). */
.component-partner-footer li {
    display: inline;
}

/* 3. Schrift nicht unter 12 px
   Gemessen auf 74 von 142 Ansichten (10 bis 11 px: Datumszeilen, Badges,
   Formular-Labels im Floating-Zustand, Beschriftung der Tab-Leiste, Saison-Pass,
   Meine Veranstaltungen). Kleiner als 12 px liest sich auf dem Handy nicht mehr.
   ------------------------------------------------------------------------------------------------------------------ */
.l-start .spotify-card-date,
.reg-row .formo-select > .control-label,
.formo-input.fl-active > .control-label,
.formo-input.fl-filled > .control-label,
.formo-password.fl-active > .control-label,
.formo-password.fl-filled > .control-label,
.formo-textarea.fl-active > .control-label,
.formo-textarea.fl-filled > .control-label,
.component-biker-member-application .formo-select > .control-label,
.component-biker-member-application .opt-help,
.component-events-start .badge.users,
.component-event-list .item .category,
.component-article-archive.article-cards .item a small,
.role-badge,
.sp-since,
.sp-eyebrow,
.sp-role,
.sp-stat-lbl,
.sp-stat-next,
.sp-meta,
.sp-platform-tag,
.benefit-card .bc-status,
.mc-date .m,
.mc-tag,
.mc-loc,
.mc-status,
.mc-act,
.mc-add-sub,
.social-strip__label,
.team-roster-badge,
.team-roster-stat-label,
.team-fact-label,
.team-schedule-date small,
.team-schedule-category,
.team-tabbar .team-tab,
.biker-table thead th,
.biker-table .bt-setup,
.bt-tag,
.bt-day,
.component-profile-settings .ps-help,
.shop-bestseller-badge,
.shop-bestseller-saving {
    font-size: 12px;
}

/* 4. Tap-Ziele
   ------------------------------------------------------------------------------------------------------------------ */
/* Monatspfeile im Kalender: waren 20 x 20 px. Das Pfeilbild bleibt so gross,
   nur die Flaeche drumherum waechst. */
.button-previous-month,
.button-next-month {
    width: 44px;
    height: 44px;
    margin: -12px 0;
    background-size: 20px 20px;
}
.button-previous-month {
    margin-left: -12px;
}
.button-next-month {
    margin-right: -12px;
}
/* Fragezeichen an den Profilfeldern: waren 18 x 18 px. */
.component-profile-settings .ps-help {
    width: 24px;
    height: 24px;
}

@media (max-width: 767px) {
    /* Logo-Link: das <a> blieb inline und damit 22 px hoch, das Bild ragte
       darueber hinaus. */
    .navbar .logo {
        display: inline-block;
    }
    /* Footer-Links: waren 14 px hoch. */
    footer .nav li {
        margin: 0;
    }
    footer .nav li a {
        display: block;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    /* "alle ›" an den Kategorie-Karussells der Startseite: war 28 x 19 px. */
    .l-start .spotify-section-more {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        margin-right: -8px;
    }
    /* Native Checkboxen und Radios: 13 px (Profil, Zusatzpakete, Artikel-Abos).
       scale statt width/height, weil die Formulare die Box absolut in 20-25 px
       Label-Einzug setzen; so waechst die Tippflaeche auf rund 20 px, ohne dass
       sich eine Zeile verschiebt. Skaliert um die Mitte, damit rechts Luft zum
       Text bleibt. Zusammen mit dem Zeilenabstand reicht das fuer WCAG 2.5.8,
       und das Label daneben ist ohnehin mit klickbar. */
    input[type="checkbox"],
    input[type="radio"] {
        transform: scale(1.5);
    }
    /* Mehrfachauswahl im Profil: Box und Text stehen per flex-gap nebeneinander. */
    .component-profile-settings .ps-choices .controls label {
        gap: 10px;
    }
    /* Kalendertage: der Link war nur so gross wie die Ziffer (9 x 22 px). */
    .component-calendar table tr td a {
        display: block;
        min-height: 32px;
        line-height: 32px;
    }
    .component-calendar table tr td {
        padding: 2px 0;
    }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

        /* Desktop: Artikel-Cards (auf mobile via hidden-xs hidden-sm ausgeblendet) */
        .l-start .item,
        /* Mobile: Spotify-Rows — Header bleibt immer sichtbar, nur Cards sliden rein */
        .l-start .spotify-row {
            animation: sa-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }

        /* Desktop: 30% */
        @keyframes sa-reveal {
            from { opacity: 0; transform: translateY(45px) scale(0.85); }
            to   { opacity: 1; transform: translateY(0)   scale(1); }
        }

        /* Mobile: 10%, ease-out damit opacity früher aufholt */
        @media (max-width: 767px) {
            .l-start .item,
            .l-start .spotify-row {
                animation-timing-function: ease-out;
            }
            @keyframes sa-reveal {
                from { opacity: 0; transform: translateY(15px) scale(0.95); }
                to   { opacity: 1; transform: translateY(0)    scale(1); }
            }
        }

    }
}
/* ============================================================
   Cookie Consent — Bottom-Sheet Style
   ============================================================ */

#cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0);
  transition: background 0.35s ease;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#cc-overlay.cc-visible {
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

#cc-sheet {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 28px 24px 36px;
  box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  outline: none;
}

#cc-overlay.cc-visible #cc-sheet {
  transform: translateY(0);
}

/* Drag handle indicator */
#cc-sheet::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: #d0d0d0;
  border-radius: 2px;
  margin: 0 auto 22px;
}

.cc-body {
  text-align: center;
  margin-bottom: 22px;
}

.cc-icon {
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 12px;
}

.cc-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1d5c8e;
  margin: 0 0 10px;
  line-height: 1.3;
}

.cc-message {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.55;
  margin: 0;
}

.cc-privacy-link {
  color: #1d5c8e;
  text-decoration: underline;
  white-space: nowrap;
}

.cc-privacy-link:hover {
  color: #153f63;
}

/* Buttons */
.cc-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-btn {
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease, background 0.15s ease;
  line-height: 1;
}

.cc-btn:active {
  transform: scale(0.97);
}

.cc-btn-all {
  background: #1d5c8e;
  color: #fff;
  order: -1;
}

.cc-btn-all:hover {
  background: #174d79;
}

.cc-btn-necessary {
  background: #f0f0f0;
  color: #444;
}

.cc-btn-necessary:hover {
  background: #e2e2e2;
}

@media (min-width: 480px) {
  .cc-buttons {
    flex-direction: row-reverse;
  }

  .cc-btn {
    flex: 1;
  }

  .cc-btn-all {
    order: 0;
  }
}

/* ============================================================
   Dark Mode
   ============================================================ */
[data-theme="dark"] #cc-sheet {
  background: #1a2739;
  box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] #cc-sheet::before {
  background: #3a4f66;
}

[data-theme="dark"] .cc-title {
  color: #f5c200;
}

[data-theme="dark"] .cc-message {
  color: #a0b4c8;
}

[data-theme="dark"] .cc-privacy-link {
  color: #7db3d9;
}

[data-theme="dark"] .cc-privacy-link:hover {
  color: #a0cbeb;
}

[data-theme="dark"] .cc-btn-all {
  background: #1d5c8e;
}

[data-theme="dark"] .cc-btn-all:hover {
  background: #174d79;
}

[data-theme="dark"] .cc-btn-necessary {
  background: #253748;
  color: #cdd8e3;
}

[data-theme="dark"] .cc-btn-necessary:hover {
  background: #2f4560;
}

@media print {
  #cc-overlay { display: none; }
}
/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(/media/images/flexslider/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
    .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}