/* NorthCon Theme – abgeleitet vom LinkStack Default Theme (Skeleton, MIT)
   Feste dunkle Darstellung, unabhängig vom OS-Farbschema.
   Farben: Rot #E10600, Grau #575756, Hintergrund #111111
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box; }
.column {
  width: 100%;
  box-sizing: border-box; }

@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 0; }
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: 100%; }

body {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  background: #111111;
  background: radial-gradient(circle at 50% 0%, #1e1e1e 0%, #111111 60%);
  font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #FFFFFF; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
  margin-top: 0;
  margin-bottom: 16px;
  font-family: "Beon", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #FFFFFF; }
h1 { font-size: 28px; line-height: 64px; }

@media (min-width: 550px) {
  h1 { font-size: 48px; line-height: 96px; }
}

p {
  margin-top: 0;
  color: #d9d9d9; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #E10600;
  text-decoration: none; }
a:hover {
  color: #ff2a24; }

.spacing {
  padding: 0 10px; }

.social-icon { color: #FFFFFF; }
.social-icon:hover { color: #E10600; }

/* Buttons – einheitlich dunkel, Rot beim Hover; Markenicons bleiben erhalten.
   Diesen Block entfernen, wenn stattdessen die Markenfarben aus brands.css gewünscht sind. */
a.button[class*="button-"] {
  color: #FFFFFF;
  background-color: #1c1c1c;
  background-image: none;
  border: 1px solid #575756;
  border-radius: 8px;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
a.button[class*="button-"]:hover,
a.button[class*="button-"]:focus {
  color: #FFFFFF;
  background-color: #E10600;
  border-color: #E10600;
  filter: none;
  transform: translateY(-1px); }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #1c1c1c;
  border: 1px solid #575756;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
p,
ol {
  margin-bottom: 2.5rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #575756; }

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #575756 #111111; }
*::-webkit-scrollbar {
  width: 8px; }
*::-webkit-scrollbar-track {
  background: #111111; }
*::-webkit-scrollbar-thumb {
  background-color: #575756;
  border-radius: 30px; }

/* Footer (Impressum / Datenschutz) und Credit
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer a, .footer a, .credit-txt-clr {
  color: #9a9a99 !important; }
footer a:hover, .footer a:hover {
  color: #E10600 !important; }
.credit-txt {
  font-weight: 700;
  font-size: 15px;
  text-decoration: none; }

/* Share-Button: Icon bekommt upstream inline "color: black" – auf dunklem Grund weiß erzwingen */
.share-icon, .sharebutton .fa-share {
  color: #FFFFFF !important; }
.sharebutton:hover .share-icon {
  color: #E10600 !important; }