/* Tills Gitarrenschule – Stylesheet */

:root {
  /* Farben */
  --farbe-hintergrund: #f1f6ee;
  --farbe-text:        #000000;
  --farbe-akzent:      #2f6b4f;
  --farbe-akzent-dunkel: #1f4d38;
  --farbe-linie:       #d3e0cf;

  /* Schriften (Systemschriften: schnell und ohne externe Dienste) */
  --schrift-text:  Georgia, "Times New Roman", serif;
  --schrift-titel: "Trebuchet MS", "Segoe UI", Helvetica, Arial, sans-serif;

  /* Abstände und Breiten */
  --breite: 62rem;
  --abstand: 1.5rem;
  --radius: 10px;
}

/* ---------- Dark Theme: Tannengrün mit Messing-Gold ----------
   Wird aktiv, wenn
   a) das Gerät des Besuchers auf "dunkel" steht (und er nicht "hell" gewählt hat), oder
   b) der Besucher unten auf "Dunkles Design" klickt.
   Die Farben stehen zweimal (einmal je Auslöser), bitte beide Blöcke gleich halten. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --farbe-hintergrund: #14231c;
  --farbe-flaeche:     #1c3027;
  --farbe-text:        #eef2e8;
  --farbe-akzent:      #d4a94e;
  --farbe-akzent-dunkel: #e8c370;
  --farbe-linie:       #2c4036;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --farbe-hintergrund: #14231c;
    --farbe-flaeche:     #1c3027;
    --farbe-text:        #eef2e8;
    --farbe-akzent:      #d4a94e;
    --farbe-akzent-dunkel: #e8c370;
    --farbe-linie:       #2c4036;
  }
}

* { box-sizing: border-box; }

html { font-size: 100%; scroll-behavior: smooth; }
h2[id],p[id] { scroll-margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


body {
  margin: 0;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: 1.125rem;
  line-height: 1.7;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--farbe-akzent); }
a:hover, a:focus-visible { color: var(--farbe-akzent-dunkel); }

h1, h2 {
  font-family: var(--schrift-titel);
  line-height: 1.2;
  margin: 0 0 0.6em;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.4rem; color: var(--farbe-akzent); }

/* ---------- Kopfbereich mit Logo ---------- */
.kopf {
  --logo-breite: 240px;          /* Größe des Logos, hier änderst du sie */
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.5rem var(--abstand) 1rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.logo {
  margin: 0;
  width: var(--logo-breite);
  max-width: 100%;
  height: auto;
  transform: translateX(0rem);
  flex-shrink: 0;
}

/* Buttons im Header */
.hauptnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--schrift-titel);
  font-size: 0.95rem;
}
.hauptnav a {
  padding: 0.4rem 1rem;
  color: var(--farbe-akzent);
  text-decoration: none;
  border: 1px solid var(--farbe-akzent);
  border-radius: 999px;
}
.hauptnav a:hover, .hauptnav a:focus-visible {
  color: var(--farbe-hintergrund);
  background: var(--farbe-akzent);
}

/* Zwei Logos: logo.svg im hellen Design, logo_dark.svg im dunklen Design */
.logo-dunkles-design { display: none; }

:root[data-theme="dark"] .logo-helles-design  { display: none; }
:root[data-theme="dark"] .logo-dunkles-design { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-helles-design  { display: none; }
  :root:not([data-theme="light"]) .logo-dunkles-design { display: block; }
}

/* ---------- Hauptbereich ---------- */
main {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--abstand);
}

.intro {
  text-align: left;
  max-width: 40rem;
  margin: 1.5rem auto 2.5rem;
}
.lead {
  font-size: 1.2rem;
  margin: 0;
}

/* ---------- Textbereich ---------- */
.text {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  display: flow-root;   /* damit seitlich umflossene Fotos im Abschnitt bleiben */
}
.text p { margin: 0 0 1.1em; }

/* Liste im Textbereich */
.text ul {
  margin: 0 0 1.1em;
  padding-left: 1.4rem;
}
.text li {
  margin-bottom: 0.35em;
}
/*.text li::marker {
  color: var(--farbe-akzent);
}*/

/* ---------- Fotos im Text ---------- */
.foto { margin: 1.45em 0; }
.foto img {
  width: 100%;
  height: auto;
  box-shadow: 0 0px 0px rgba(43, 33, 24, 0.15);
}

.text > .foto:first-child { margin-top: 0; }

/* Überschrift direkt unter einem Foto bekommt Abstand nach oben */
.text figure + h2 { margin-top: 2rem; }

/* Optionale Varianten, nur wirksam, wenn die Klasse zusätzlich am Foto steht,
   z. B. <figure class="foto foto-links"> */


/* Foto breiter als der Text, ragt links und rechts hinaus (nur auf großen Bildschirmen) */
@media (min-width: 52rem) {
  .foto-breit {
    margin-left: -4rem;
    margin-right: -4rem;
  }
}

/* Foto neben dem Text, der Text umfließt es */
.foto-links  { float: left;  width: 45%; margin: 0.3rem 1.5rem 1rem 0; }
.foto-rechts { float: right; width: 45%; margin: 0.3rem 0 1rem 1.5rem; }

/* Zwei Fotos nebeneinander, zusammen so breit wie der Text */
.foto-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.45em 0;
}
.foto-paar .foto {
  margin: 0;
  width: auto;
  float: none;
}

/*.foto-paar img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
} */
.foto-paar + h2 { margin-top: 2rem; } 


.foto-4 { height: 100%; } 



/* ---------- Fußzeile ---------- */
.fuss {
  border-top: 1px solid var(--farbe-linie);
  padding: 1.5rem var(--abstand) 2.5rem;
  text-align: center;
  font-family: var(--schrift-titel);
  font-size: 0.95rem;
}
.fuss a {
  margin: 0 0.8rem;
  color: var(--farbe-text);
}
.fuss a:hover, .fuss a:focus-visible { color: var(--farbe-akzent); }

.fuss .nach-oben {
  display: inline-block;
  margin: 0 0 1rem;
}

/* Umschalter für das dunkle Design */
.theme-schalter {
  display: block;
  margin: 1rem auto 0;
  padding: 0.4rem 1rem;
  font: inherit;
  color: var(--farbe-text);
  background: transparent;
  border: 1px solid var(--farbe-linie);
  border-radius: 999px;
  cursor: pointer;
}
.theme-schalter:hover, .theme-schalter:focus-visible {
  color: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
}
.theme-schalter[aria-pressed="true"]::before { content: "✓ "; }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.rechtstext {
  max-width: 44rem;
  margin: 2rem auto 3rem;
  padding: 0 var(--abstand);
}
.rechtstext h1 { font-size: 1.8rem; }
.rechtstext h2 { font-size: 1.25rem; margin-top: 2rem; }
.zurueck {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-family: var(--schrift-titel);
  font-size: 0.95rem;
}

@media (max-width: 52rem) {
  .hauptnav {
    flex-direction: column;
    align-items: flex-end;
  }
  .hauptnav a { white-space: nowrap; }
}

/* ---------- Handy und Tablet ---------- */
@media (max-width: 700px) {


.logo { transform: translateX(-1rem); }

.kopf {
  --logo-breite: 200px;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1rem 0.5rem;
}
.hauptnav {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.hauptnav a {
  padding: 0.3rem 0.8rem;
  white-space: nowrap;
}

.intro { text-align: left;
max-width: 40rem;
margin: 1.5rem auto 1.0rem; }

body { font-size: 1.2rem; }

h1 { font-size: 1.5rem; }
h2 { font-size: 1.4rem; }

.lead { font-size: 1.2rem; }

/* Rechtstext: Überschriften auf dem Handy */
.rechtstext h1 { font-size: 1.6rem; }
.rechtstext h2 { font-size: 1.4rem; }

/* Seitlich umflossene Fotos stehen auf dem Handy in voller Breite */
.foto-links, .foto-rechts {
  float: none;
  width: 100%;
  margin: 1.45em 0;
}

.foto-1, .foto-2, .foto-3, .foto-4, .foto-5 {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  transform: none;
}

/* Fußzeile auf dem Handy: alle Links in einer Reihe */
.fuss nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
}
.fuss a {
  margin: 0;
  font-size: 0.9rem;
}
}