@charset "utf-8";
/* =====================================================================
   site.css  –  F2F3 / Gitarrenschule Thomas Reinermann
   Zentrales, responsives Stylesheet fuer alle Seiten.
   Pfade zu Bildern sind relativ zu diesem Ordner (css/).
   ===================================================================== */

/* ---------- 1. Grundlagen / Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Verdana, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
  line-height: 1.65;
  color: #23262b;
  /* Seitenverlauf – entspricht PNGs/back.png, skaliert aber mit der Seitenhoehe */
  background-color: #d8d8d8;
  background-image: url(../PNGs/back.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ---------- 1b. Fließender Seitenrand ----------
   Links und rechts neben der 730-px-Spalte liegt auf PC-Bildschirmen ein
   breiter grauer Verlauf (PNGs/back.png). Der fliesst jetzt langsam wie
   ein wandernder Lichtschleier.

   Umsetzung: eine eigene Ebene (body::before) ueber der bestehenden
   back.png, die nur mit transform bewegt wird. Transform-Animationen
   laufen auf der GPU, der Verlauf wird also genau einmal gezeichnet und
   danach nur noch verschoben. Ein Animieren von background-position
   wuerde die ganze Bildschirmflaeche pro Bild neu zeichnen und die Seite
   praktisch einfrieren (gemessen: 1 Bild in 3 Sekunden).

   position: fixed, damit die Ebene nur so gross wie das Sichtfenster
   wird und nicht mit der Seitenhoehe wächst. Sie existiert erst ab
   820 px Breite – darunter ist die 730-px-Spalte so breit wie der
   Bildschirm, der Rand existiert gar nicht und der Rand bleibt dann
   einfach der statische back.png-Verlauf.                          */
@media (min-width: 820px) {
  body::before {
    content: "";
    position: fixed;
    /* Ueberhang oben/unten: eine volle Kachelhoehe plus Reserve,
       damit beim Wandern keine ungedeckte Luecke entsteht. */
    top: -560px;
    bottom: -560px;
    left: 0;
    right: 0;
    z-index: -1; /* hinter .page, aber vor dem back.png-Verlauf */
    background-image:
      radial-gradient(38% 20% at 22% 12%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
      radial-gradient(32% 17% at 74% 30%, rgba(122, 122, 122, 0.42), rgba(122, 122, 122, 0) 72%),
      radial-gradient(44% 22% at 50% 50%, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0) 68%),
      radial-gradient(30% 16% at 18% 70%, rgba(122, 122, 122, 0.40), rgba(122, 122, 122, 0) 72%),
      radial-gradient(36% 19% at 84% 86%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%);
    background-size: 100% 460px;
    background-repeat: repeat;
    background-position: 50% 0;
    animation: rand-fluss 12s linear infinite;
  }
}

/* Der Verlauf wandert um genau eine Kachelhoehe (460 px) nach oben.
   Da das Muster sich alle 460 px wiederholt, sieht es am Ende der
   Schleife exakt wieder wie am Anfang aus – kein sichtbarer Sprung
   (gemessen: hoechstens 2 Graustufen Unterschied).                  */
@keyframes rand-fluss {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -460px, 0);
  }
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

a {
  color: #17538f;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  color: #b8141b;
}

:focus-visible {
  outline: 3px solid #b8141b;
  outline-offset: 2px;
}

/* ---------- 2. Seitenrahmen ---------- */
.page {
  width: 100%;
  max-width: 730px;
  margin: 0 auto;
  background: #e0e0e0;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- 3. Kopfbereich ---------- */
.site-header {
  flex: 0 0 auto;
}

.raster-top {
  height: 76px;
  background: #d8d8d8 url(../PNGs/raster_top.png) repeat-x center top;
  background-size: auto 76px;
}

.site-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 4. Navigation ---------- */
.site-nav {
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
  background: linear-gradient(180deg, #d5d7db 0%, #c9cdd5 22%, #aeb0b7 62%, #8f949d 100%);
  border-bottom: 3px solid #ff1e22;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.nav-inner {
  max-width: 730px;
  margin: 0 auto;
  padding: 7px 10px;
}

/* --- Hamburger-Button (nur auf kleinen Schirmen sichtbar) --- */
/* Sichtbar nur, wenn JavaScript aktiv ist (Klasse "has-js" aus nav.js).
   Ohne JavaScript bleibt die Linkliste offen und bedienbar. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  font: inherit;
  font-weight: bold;
  color: #23262b;
  background: linear-gradient(180deg, #ffffff 0%, #d9dce2 100%);
  border: 1px solid #9a9fa7;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e9ecf1 100%);
}

.nav-toggle-icon {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  background: #23262b;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #23262b;
  border-radius: 2px;
  transition: transform 0.2s ease, top 0.2s ease;
}

.nav-toggle-icon::before {
  top: -7px;
}

.nav-toggle-icon::after {
  top: 7px;
}

/* Zustand "Menü ist offen" -> Striche werden zum Kreuz */
.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-toggle-label {
  flex: 1 1 auto;
  text-align: left;
}

/* --- Linkliste --- */
.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list li {
  margin: 0;
  padding: 0;
}

.nav-list a {
  display: block;
  padding: 6px 13px;
  font-size: 0.8125rem;
  font-weight: bold;
  line-height: 1.35;
  color: #26292f;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #dfe2e8 55%, #c3c7cf 100%);
  border: 1px solid #a4a9b1;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: #000;
  background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.nav-list a:active {
  transform: translateY(0);
}

/* Aktuell offene Seite */
.nav-list a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, #ff5257 0%, #e01f26 55%, #b8141b 100%);
  border-color: #8e0f14;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ---------- 4b. Hervorgehobener Button: "Gitarrenunterricht" ----------
   Blinkt dauerhaft blau, um Aufmerksamkeit zu erregen.
   Sobald man auf der Seite ist, bleibt er rot und blinkt nicht mehr.      */

.nav-list a.nav-flash {
  color: #fff;
  background: linear-gradient(180deg, #4d9bff 0%, #1f6fe0 55%, #0d4fb5 100%);
  border-color: #0a3f92;
  animation: nav-flash-pulse 1.4s ease-in-out infinite;
}

.nav-list a.nav-flash:hover,
.nav-list a.nav-flash:focus-visible {
  color: #fff;
  background: linear-gradient(180deg, #6fb0ff 0%, #2f80ef 55%, #1558c4 100%);
  transform: translateY(-1px);
  animation-duration: 0.7s;
}

/* Auf der Seite selbst: rot und ohne Blinken */
.nav-list a.nav-flash[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, #ff5257 0%, #e01f26 55%, #b8141b 100%);
  border-color: #8e0f14;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  animation: none;
  filter: none;
}

@keyframes nav-flash-pulse {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(38, 120, 235, 0.85);
  }
  50% {
    filter: brightness(1.4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 0 9px rgba(38, 120, 235, 0);
  }
}

/* ---------- 5. Inhaltsbereich ---------- */

.site-main {
  flex: 1 0 auto;
  background: #e0e0e0;
  padding: 25px;
  min-width: 0;
}

.site-main > *:first-child {
  margin-top: 0;
}

.site-main > *:last-child {
  margin-bottom: 0;
}

/* Zwei-Spalten-Layout (Hauptteil + Seitenleiste) */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 25px;
  align-items: start;
}

@media (min-width: 680px) {
  .content-grid.has-aside {
    grid-template-columns: minmax(0, 1fr) 190px;
  }
}

.aside {
  min-width: 0;
  padding: 18px;
  background: #d6d6d6;
  border: 1px solid #c2c2c2;
  border-radius: 6px;
}

.aside h2,
.aside h3 {
  margin-top: 0;
  font-size: 1.05rem;
}

/* ---------- 6. Typografie ---------- */
h1,
h2,
h3,
h4 {
  font-family: Verdana, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.3;
  color: #1b1e23;
  margin: 1.4em 0 0.5em;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
}

h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem);
}

h3 {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
}

h4 {
  font-size: 1rem;
}

p {
  margin: 0 0 1em;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

li {
  margin-bottom: 0.35em;
}

hr {
  border: 0;
  border-top: 1px solid #b9b9b9;
  margin: 1.6em 0;
}

address {
  font-style: normal;
}

small,
.note {
  font-size: 0.85em;
  color: #55595f;
}

address a,
.contact a {
  font-weight: bold;
}

/* ---------- 7. Videos ---------- */
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1em 0;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- 8. Buttons ---------- */
.btn {
  display: inline-block;
  padding: 11px 20px;
  min-height: 44px;
  font: inherit;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(180deg, #ff5257 0%, #e01f26 55%, #b8141b 100%);
  border: 1px solid #8e0f14;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover,
.btn:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.32);
}

.btn:active {
  transform: translateY(0);
}

/* Verlinkte Bilder (z. B. Presse / Links) */
a.image-link {
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
}

a.image-link img {
  display: block;
}

a.image-link:hover img,
a.image-link:focus-visible img {
  opacity: 0.85;
}

/* ---------- 9. Kontaktblock ---------- */
.contact {
  margin: 1.2em 0;
  padding: 16px 18px;
  background: #d6d6d6;
  border-left: 5px solid #e01f26;
  border-radius: 0 6px 6px 0;
}

.contact p:last-child {
  margin-bottom: 0;
}

/* ---------- 10. Bilder-Lightbox (Band) ---------- */
.slideshow {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  background: #1c1f24;
  border: 1px solid #b4b4b4;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.slideshow-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #1c1f24;
}

.slideshow-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slideshow-stage img.is-active {
  opacity: 1;
}

.slideshow-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 60%);
}

.slideshow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: rgba(20, 22, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

.slideshow-btn:hover,
.slideshow-btn:focus-visible {
  background: rgba(200, 25, 32, 0.85);
  outline: none;
}

.slideshow-prev {
  left: 8px;
}

.slideshow-next {
  right: 8px;
}

.slideshow-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: #1c1f24;
}

.slideshow-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  background: #7c828c;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.slideshow-dots button.is-active {
  background: #ff1e22;
}

.slideshow-dots button:hover {
  background: #b8141b;
}

/* ---------- 11. Fussbereich ---------- */
.site-footer {
  flex: 0 0 auto;
}

.footer-bar {
  height: 24px;
  background: linear-gradient(180deg, #ff1e22 0%, #e13f42 4%, #a6a8ac 40%, #767c85 100%);
}

.raster-bottom {
  height: 43px;
  background: #565b65 url(../PNGs/raster_down.png) repeat-x center top;
  background-size: auto 43px;
}

.footer-note {
  margin: 0;
  padding: 10px 25px 18px;
  font-size: 0.8125rem;
  text-align: center;
  color: #3c4046;
  background: #d8d8d8;
  border-top: 1px solid #c4c4c4;
}

.footer-note a {
  color: #17538f;
}

/* =====================================================================
   12. Anpassungen fuer kleine Bildschirme (Handy)
   ===================================================================== */
@media (max-width: 679px) {
  body {
    line-height: 1.6;
  }

  .page {
    box-shadow: none;
  }

  /* Dekorative Rasterstreifen werden schmaler, damit Platz fuer Inhalt bleibt */
  .raster-top {
    height: 34px;
    background-size: auto 34px;
  }

  .raster-bottom {
    height: 22px;
    background-size: auto 22px;
  }

  .nav-inner {
    padding: 8px 10px 10px;
  }

  /* Hamburger einblenden, Liste einklappen (nur mit JavaScript) */
  .has-js .nav-toggle {
    display: flex;
  }

  .has-js .nav-list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
  }

  .has-js .site-nav.is-open .nav-list {
    display: flex;
  }

  .has-js .nav-list a {
    padding: 11px 14px;
    font-size: 1rem;
    text-align: center;
    border-radius: 8px;
  }

  .site-main {
    padding: 18px 16px 22px;
  }

  .content-grid,
  .content-grid.has-aside {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .aside {
    padding: 15px;
  }

  .footer-note {
    padding: 12px 16px 20px;
  }

  .contact {
    padding: 14px;
  }

  .slideshow {
    max-width: 320px;
  }

  .btn {
    display: block;
    width: 100%;
  }
}

/* Sehr kleine Bildschirme */
@media (max-width: 359px) {
  .site-main {
    padding: 14px 11px 18px;
  }

  .raster-top {
    height: 24px;
    background-size: auto 24px;
  }
}

/* ---------- 13. Barrierefreiheit / Bewegungsreduktion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 14. Druckansicht ---------- */
@media print {
  .site-nav,
  .raster-top,
  .raster-bottom,
  .footer-bar,
  .footer-note,
  .slideshow-btn,
  .slideshow-dots {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .page {
    max-width: 100%;
    box-shadow: none;
  }

  /* Fließenden Seitenrand nicht mit ausdrucken (spart Toner) */
  body::before {
    display: none !important;
  }

  .site-main {
    background: #fff;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}