/* =========================================================
   BASE (wie bei dir)
   ========================================================= */

@font-face {
  font-family: "Orbitron";
  src: url("../fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mulish";
  src: url("../fonts/Mulish-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --sidebar-bg: #18191E;
  --sidebar-w: 240px;
  --socialmenu-w: 50px;   /* Desktop Sidebar Breite (links) */
}

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

body {
  background-color: #000000;
  color: #ffffff;
  font-family: "Mulish", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
}

body.lime {
  background-color: lime;
}

body.nuerburgring {
background-image: url('../images/17652074696303.svg');
  background-repeat: no-repeat;
  background-position: right -60px top -180px;
  background-size: 800px auto;
}

body.zielflagge {
background-color: white; 
  background-image: url('../images/17598326147688.gif'); 
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}

p {margin:0;}

h1, h2, h3,
.logoschrift {
  font-family: "Orbitron", system-ui, sans-serif;
  text-transform: lowercase;
}

h1 {
  font-size: 26px;
  line-height: 36px;
  margin-bottom: 10px;
  margin-top: 0px;
}

h2 {
  margin-bottom: 10px;
  margin-top: 0px;
  font-size: 20px;
}

h3 {
  margin-bottom: 10px;
  margin-top: 0px;
  font-size:16px;
}

a {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
}

a:hover,
.pic_title:hover {
  text-decoration: underline;
  color:#efefef;
}

a.logoschrift {
  font-weight:normal;
}

table {
  border-collapse: collapse;
}

td, th {
  padding: 8px;
}

#slider {
  background-color:lime;
  width:100%;
  height:50px;
  border-collapse: collapse;
  margin-left: calc(var(--sidebar-w) + 50px);
}

.cibutton {
  display: inline-block;
  padding: 8px;
  border: 1px solid #ffffff;
  border-radius: 0px;
  margin-top: 10px;
  text-transform: lowercase;
}

.cibutton:hover {
  text-decoration: underline;
  border: 1px solid #efefef;
  color: #efefef;
  background-color: #18191e;
}

#main-menu {
  list-style-type: none;
  padding-left: 0px;
}

#main-menu a {
  text-transform: lowercase;
  font-weight: normal;
}

article {
  padding: 0px 10px;
}

main {
  line-height: 25px;
  margin-top: 120px;
    margin-right: var(--socialmenu-w);
  padding-bottom:70px;
}

.page-mood main img {
  width:100%;
}

#tz3-verbrauch tr:nth-child(odd) {
background-color: #18191E;
}

.about-me h2 {
padding:0;
margin:0 0 10px 0;
font-size:32px;
line-height: 36px;
}

.about-me h1,
.about-me h3 {
color:#4E4E55;
font-size:20px;
padding:0;
margin:0;
}

.about-me section,
.page-datenschutz section  {
  display: flow-root;
  margin-bottom: 20px;
}

.page-datenschutz p {
  padding-bottom: 10px;
}


#footer {
  position: fixed;
  width:100%;
  padding:4px 10px;
  bottom:0;
  background-color:#0F1014;
    box-sizing: border-box;

}

/* Impressum aktiv */
body.page-impressum #footer a[href="impressum"],
body.page-datenschutz #footer a[href="datenschutz"] {
  text-decoration: underline;
  color:#efefef;
}


#pumpkin {
  z-index: 5;
  position: fixed;
  left: 75px;
top: 80px;
height: 25px;
transition: 0.5s;
}

.scrolled #pumpkin {
  left: 45px;
  top: 50px;
  height: 15px;
}

#footer a {
  font-size: 14px;
  text-transform: lowercase;
}

/* Tabelle wird zur scrollbaren Box */
#tz3-verbrauch{
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabelle soll ihre Breite nach Inhalt bestimmen (nicht quetschen) */
#tz3-verbrauch{
  border-collapse: collapse;
  width: max-content;   /* wächst nach Inhalt */
  min-width: 100%;      /* aber mindestens so breit wie der Viewport */
}

/* optional: nicht umbrechen => saubere Spalten */
#tz3-verbrauch th,
#tz3-verbrauch td{
  white-space: nowrap;
}

.everything img {
width:100%;
}

.impressum article p {
  margin-bottom: 25px;
}

.clean .content {
  max-width:100%;
  margin-left:0;
  text-align: center;
  margin-top: 80px;
margin-right: 0;
}

.fuckyou h1 {
  font-size: 60px;
line-height: 80px;
margin-bottom:20px;
}

.fuckyou .content img {
  width:300px;
}


/* =========================================================
   NAV / SIDEBAR (Mobile first mit Burger)
   ========================================================= */

/* Container */
#side-nav {
  position: fixed;
  background-color: var(--sidebar-bg);
  padding: 10px;
  top: 0;
  display: flex;
  flex-wrap: wrap;                 /* wichtig: nav kann in neue Zeile */
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width:100%;
}

/* Logo */
#logo {
  height: 90px;
  display: block;
  transition: height 0.5s;
}

.scrolled #logo {
  height:50px;
}

.fotobox {
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: 20px;
}


/* Burger */
#burger {
  font-size: 28px;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  padding: 10px;
  line-height: 1;
  margin-right: var(--socialmenu-w);
}

/* Nav: mobil zu */
#side-nav nav {
  display: none;
  flex-basis: 100%;                /* ganze Zeile unter Logo/Burger */
  width: 100%;
}

/* Nav: mobil offen (JS toggelt .open auf <nav>) */
#side-nav nav.open {
  display: block;
}

/* Menü mobil: vertikal */
#main-menu {
  margin: 10px 0px 0px 0px;
}

#main-menu li {
  padding: 6px 0;
}

#main-menu a {
  display: inline-block;
  font-size: 18px;
  line-height: 1.2;
}

#socialmenu a img:hover {
filter: brightness(0.7);
}

/* Optional: aktiver Link sichtbarer */
#main-menu .is-active > a {
  text-decoration: underline;
  color:#efefef;
}

#socialmenu {
width: var(--socialmenu-w);
height:100vh;
position:fixed;
top:0;
right:0;
background-color:#0F1014;
text-align:center;
padding-top:15px;
}

#socialmenu div img {
width:30px;
margin-bottom:10px;
}

  #santa-hat {
    z-index: 10;
    position: fixed;
    width: 31px;
rotate: unset;
transform: rotate(-30deg);
top: -4px;
left:0;
transition: width 0.5s;
  }

  .scrolled #santa-hat {
width: 20px;
top: 1px;
left: 2px;}

  #delorean-gif,
  #sticker-tz3 {
    display: none;
  }

  #sticker-tz3 {
  cursor: pointer;
}

  #rossi-sticker {
    display: unset;
    position: fixed;
    width: 40px;
    right: 6px;
    bottom: 20px;
    z-index: 10;
  }

.playlist-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pic_outer_container{
  text-align:center;
}

.pic_container{
  overflow:hidden;
  aspect-ratio:1/1;
}

.pic_container img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.pic_title{
  display:inline-block;
  margin-top:10px;
}

.fotobox__bild img {
  float: unset;
  width: 100%;
}

.fotobox::after {
  content: "";
  display: block;
  clear: both;
}

.fotobox {
  margin-bottom:15px;
}

#error-image {
  padding:20px 0;
  width:200px;
}

canvas {
 display: none;
}

.flex-picture-line {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile first: 2 Spalten */
  gap: 1rem;
}

.flex-picture-line a {
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.flex-picture-line img {
  width: 100%;
  height: auto;
  display: block;
}

.events {
  display: block;
}

.event {
  margin-bottom: 1rem;
}

.event strong,
.event em,
.event .date {
  display: block;
}

/* =========================================================
   DESKTOP: links fixe Sidebar
   ========================================================= */

@media (min-width: 1024px) {
body {
  overflow-x: hidden;
}
  #logo {
    height:165px;
  }

  .scrolled #logo {
  height:165px;
}

  #delorean-gif {
    display: unset;
  position: fixed;
  bottom: -70px;
  height: 230px;
  right: 30px;}

  #santa-hat,
  .scrolled #santa-hat {
    width: 65px;
    rotate: unset;
    top: -4px;
    left:15px;
  }

  #sticker-tz3 {
    display:unset;
position: fixed;
  left: 130px;
width: 160px;
bottom: 20px;
z-index: 10;
}

#rossi-sticker {
width: 40px;
left: 245px;
bottom: 10px;
z-index: 10;
}

  body.nuerburgring {
  background-position: right -70px top -270px;
  background-size: 1150px auto;
}

  /* Sidebar links fix & volle Höhe */
  #side-nav {
    left: 0;
    height: 100vh;
    width: var(--sidebar-w);
    padding: 25px 40px;

    display: flex;
    flex-direction: column;        /* Logo oben, Menü darunter */
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 16px;
  }

#socialmenu {
left:  var(--sidebar-w);
padding-top: 23px;
}

#socialmenu div img {
width: 30px;
margin-bottom: 10px;
}

.cloudbutton {
  margin-top:10px;
}



  /* Burger weg */
  #burger {
    display: none;
  }

  /* Nav immer sichtbar */
  #side-nav nav {
    display: block !important;
    width: 100%;
    flex-basis: auto;
  }

  /* Menü vertikal, etwas luftiger */
  #main-menu {
    padding: 0;
    margin: 0;
  }

  #main-menu li {
    padding: 4px 0;
  }

  #main-menu a {
    font-size: 20px;
  }

  /* Damit dein Seiteninhalt nicht unter der Sidebar liegt:
     Passe den Selector an deinen Content-Wrapper an, z.B. #content, main, .site etc.
     (Wenn du keinen Wrapper hast, sag mir kurz wie er heißt.) */
  main {
    margin-left: calc(var(--sidebar-w) + 50px);
    margin-right:0;
    max-width: 1000px;
    margin-top: 15px;
  }

  .page-mood main img {
  margin-bottom: -6px;
}

 #footer {
  position: absolute;
left: calc(var(--sidebar-w) + 50px);
right: 0;
width: auto;
background-color: unset;
top: 20px;
bottom: unset;
text-align: right;
padding:0 10px;
  max-width:1000px;
}


#tz3-verbrauch {
width:100%;
}

  .playlist-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap: 15px;
  }

  .fotobox__bild img {
  float: left;
  width: 300px;
  margin-right: 15px;
}

.everything img {
float:right;
width:40%;
margin-left:15px;
border-radius:8px;
}


#pumpkin {
  height: 50px;
  top: 160px;
  left: 150px;
}

canvas {
 display: unset;
}

  .flex-picture-line {
    grid-template-columns: repeat(5, 1fr);
  }
   .event strong,
  .event em,
  .event .date {
    display: inline;
    margin-left: 4px;
  }

  .event {
  margin-bottom: 0;
}

}



@media (max-height: 595px) {
  #sticker-tz3, #rossi-sticker {
    display: none;
  }
}