/* =========================================================
   BASIS / VARIABLEN
   ========================================================= */
:root{
  --bg-page:  #e7e7e7;  /* Body-Hintergrund (Rahmen) */
  --bg-header:#fff9ae;  /* Header/Banner */
  --bg-nav:   #fff9ae;  /* Navigation */
  --bg-main:  #fff9ae;  /* Content + Site-Container */
  --bg-footer:#fff9ae;  /* Footer */
  --txt:      #333;
  --accent:   #d8d494;
  --maxw:     960px;
  --gap:      16px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:sans-serif;
  line-height:1.6;
  color:var(--txt);
  background:var(--bg-page);
}

/* =========================================================
   GESAMT-CONTAINER (max 960 px, zentriert)
   ========================================================= */
.site{
  max-width:var(--maxw);
  margin:15px auto 0;      /* Abstand oben zum grauen Body */
  background:var(--bg-main); /* einheitlicher Hintergrund – keine Fugen innen */
  padding:0;               /* Sektionen steuern ihren Innenabstand selbst */
}

/* =========================================================
   HEADER (BANNER) – bündig, kein allgemeines Padding
   ========================================================= */
.site-header{
  background:var(--bg-header);
  margin:0;     /* keine Außenabstände -> nahtlos */
  padding:0;    /* Banner selbst bündig */
}

/* Top-Leiste im Header (Logo/Burger) mit etwas Innenabstand */
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap);
  padding: var(--gap);     /* nur hier etwas Luft */
}
.brand img{
  display:block;
  /*height:60px;*/
  width:auto;
}

/* Bannerbilder füllen die volle Headerbreite (960px) ohne Padding */
.header-banners{
  display:grid;
  grid-template-columns:1fr;
}
.header-banners img{
  display:block;
  width:100%;
  height:auto;
}

/* =========================================================
   LAYOUT: NAV + MAIN + FOOTER
   ========================================================= */
.layout{
  display:grid;
  grid-template-columns:1fr;     /* mobil: einspaltig */
  gap:var(--gap);
  align-items:start;
  margin:0;                      /* keine Außenabstände */
  padding: 0 var(--gap) var(--gap); /* Innenabstände: seitlich + unten */
}

/* Navigation */
.site-nav{
  background:var(--bg-nav);
  padding:var(--gap);
  display:none;                  /* mobil per .is-open sichtbar */
}
.site-nav.is-open{ display:block; }

/* Main */
.site-main{
  background:var(--bg-main);
  padding: calc(var(--gap) * 1.5);
}

/* Footer */
.site-footer{
  background:var(--bg-footer);
  padding: var(--gap);
  text-align:center;
  font-size:.9rem;
  margin:0;                      /* nahtlos, keine Fuge */
}

/* =========================================================
   NAVIGATION: Links vertikal + Hover
   ========================================================= */
.site-nav a{
  display:block;
  text-decoration:none;
  color:var(--txt);
  font-weight:bold;
  padding:6px 8px;
  border-radius:6px;
}
.site-nav a + a{ margin-top:6px; }
.site-nav a:hover,
.site-nav a:focus{
  background:var(--accent);
  outline:0;
}

/* =========================================================
   BURGER-BUTTON (mobil)
   ========================================================= */
.nav-toggle{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:40px;
  height:40px;
  padding:6px;
  border:1px solid #aaa;
  background:#fff;
  border-radius:6px;
  cursor:pointer;
}
.nav-toggle:focus{ outline:3px solid var(--accent); }
.nav-toggle-bar{
  display:block;
  height:2px;
  width:100%;
  background:#000;
  border-radius:1px;
}

/* =========================================================
   DESKTOP: AB 800PX → NAV LINKS / MAIN RECHTS
   ========================================================= */
@media (min-width:800px){
  .layout{
    grid-template-columns:220px 1fr;
  }
  .site-nav{ display:block; }
  .nav-toggle{ display:none; }
}

/* =========================================================
   STANDARD-STYLES (knapp)
   ========================================================= */
a, a:link, a:visited, a:focus, a:hover, a:active, button{
  transition:all .2s ease;
}
pre{ display:block; white-space:pre; max-width:100%; overflow-x:auto; }
code{ display:inline-block; word-break:break-all; }
.tm-table{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; }
dt::after{ content:":"; }

img, figure, figure img{ max-width:100%; height:auto; }
figure{ display:table; margin:2em auto; padding:0; }
@media (min-width:40em){
  figure.right{ float:right; margin:0 0 2em 2em; }
  figure.left{ float:left; margin:0 2em 2em 0; }
}
figure img{ display:block; margin:auto; }
figcaption{ display:table-caption; caption-side:bottom; }
.logo-image{ max-width:250px; max-height:80px; }

/* Notices */
.notice1{ margin:1em 0; padding:10px 1em; background:#fafafa; border-left:10px solid #000; }
.notice2{ margin:1em 0; padding:10px 1em; background:#eee; border-left:10px solid #999; }
.notice3,.notice4,.notice5,.notice6{ margin:1em 0; padding:10px 1em; background:#444; border-left:10px solid #ccc; color:#fff; }

/* Anchor Links */
a.tm-heading-anchor{
  display:inline-block;
  margin-left:-0.8em;
  width:0.8em;
  font-weight:300;
  opacity:.5;
  text-decoration:none;
}
a.tm-heading-anchor:hover,
a.tm-heading-anchor:focus{ opacity:1; text-decoration:none; }
h2:focus>.tm-heading-anchor, h2:hover>.tm-heading-anchor,
h3:focus>.tm-heading-anchor, h3:hover>.tm-heading-anchor,
h4:focus>.tm-heading-anchor, h4:hover>.tm-heading-anchor,
h5:focus>.tm-heading-anchor, h5:hover>.tm-heading-anchor,
h6:focus>.tm-heading-anchor, h6:hover>.tm-heading-anchor{ opacity:.75; }

/* Download-Icon (vereinfachte Variante) */
a.tm-download::before{
  content:"\2193";
  display:inline-block;
  width:24px; height:24px;
  background:currentColor;
  margin-right:5px;
  vertical-align:middle;
}

/* YouTube */
.video-container{ position:relative; text-align:center; }
img.youtube{ max-width:560px; }
button.play-video{
  position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px;
  height:100px; width:100px;
  background:#e0474c; color:#fff; border-radius:50%; border:0;
}
button.play-video:hover{ background:#cc4146; cursor:pointer; }
button.play-video::after{
  position:absolute; top:50%; margin:-20px 0 0 -15px;
  border-style:solid; border-width:20px 0 20px 40px;
  border-color:transparent transparent transparent rgba(255,255,255,.75);
  content:' ';
}

/* Forms */
form, fieldset{ width:100%; border:0; margin:20px 0; padding:0; }
label{ width:100%; display:block; color:#333; margin-top:1em; }
input, textarea{
  width:100%;
  border:1px solid #ddd;
  padding:15px;
  margin:0 0 20px 0;
  background:#f5f5f5;
}
input:focus, select:focus, textarea:focus{
  border:1px solid rgba(229,226,211,1);
  box-shadow:0 0 2px #D73B00;
}
input[type="submit"], button, .button{
  cursor:pointer; color:#fff; background:#333; font-size:1em; border:0;
}
input[type="submit"]:hover, button:hover, .button:hover{ opacity:.7; }

h1 {color: #8a8a8a;}