/* Schrift einbinden — Pfade wie auf Strato Server */
@font-face {
  font-family: "georgia-pro-cond";
  src: url("/font/GeorgiaPro-CondLight.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "georgia-pro-cond";
  src: url("/font/GeorgiaPro-CondLightItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* GRUNDFARBEN */
:root{
  --bg: #B0945B;              			/* Hintergrundfarbe */
  --text: #111111;
  --accent: #FFFDD0;          			/* Cremefarben */
  --muted: #333333;
  --sidebar-width: 240px;
}

/* Navigation */

.main-nav a {
  display: block;
  padding: 10px 8px;
  text-decoration: none;
  color: var(--text);         			/* Schriftfarbe bleibt schwarz */
  border-left: 4px solid transparent;
  transition: all 180ms ease;
  font-size: 1rem;
}

/* Navigation – Aktive Linkfarbe */

.main-nav a.nav-link:hover {
  background: rgba(255, 253, 208, 0.15);  	/* Blass cremefarbener Hover-Effekt / alternativ in blassblau: 91, 119, 176 */
}

.main-nav a.active {
  font-weight: 700;
  color: var(--text);               		/* Menuepunkt Schriftfarbe = schwarz */
  border-left-color: var(--accent);  		/* cremefarbener Balken */
  background: rgba(255, 253, 208, 0.18); 	/* dezente cremefarbene Fläche */
}

/* Grundfarben für Images 			AUSKOMMENTIERT!!!
img {
    border: 0px solid #6B6B6B;
} */

/* Reset / Basis */
*{box-sizing:border-box}
html,body{height:100%}
body {
  margin:0;
  font-family: "georgia-pro-cond", Georgia, serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.45;
  font-size:18px; 				/* Schriftgröße 18 Pixel */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Page Layout */
.page-wrap {
  display:flex;
  min-height:100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  min-width:180px;
  padding:18px;
  background: rgba(255,255,255,0.04);
  border-right: 1px solid rgba(0,0,0,0.06);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}


.logo {
  display: block;
  height: auto;
  max-width: 200px;
  width: 100%;
  border-radius:6px;				/* Ecken sanft abrunden */
  border: 2px solid black;
  object-fit: contain;
}

/* Logo bleibt auf kleinen Screens lesbar */
@media (max-width:900px){
  .sidebar .logo {
    max-width: 160px;
    min-width: 120px;   /* verhindert „Punktgröße“ */
  }
}

@media (max-width:460px){
  .sidebar .logo {
    max-width: 140px;
    min-width: 100px;   /* untere Grenze */
  }
}

.logo-link { text-decoration:none; display:block; }

/* Navigation */
.main-nav{
  display:flex;
  flex-direction:column;
  width:100%;
  margin-top:4px;				/* Abstand der Menuepunkte hat aber nur minimale Wirkung */
}
.main-nav a{
  display:block;
  padding:8px 6px;
  text-decoration:none;
  color:var(--text);
  border-left:4px solid transparent;
  transition: all 180ms ease;
  font-size:1.1rem;
}

/* Spacer (großer Abstand zwischen Sektionen) */
.nav-spacer{
  margin-top:75px;
  margin-bottom:10px;
  width:100%;
  height:1px;
  opacity:0;
}

/* Content */
.content{
  flex:1;
  padding:28px 36px;
  max-width:1100px;
  margin:0 auto;
}
.site-header{
  text-align:center;
  margin-bottom:22px;
}
.site-header h1{
  margin:6px 0 0;
  font-size:2.5rem;
  letter-spacing:0.6px;
}

/* Untertitel von Site Header */
.site-header .subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-style:normal;
  font-size: 1.7rem;				/* Größe von Titel: Ralph Ehlers Guitars */
}

/* Pages */
.text-page{
  background: rgba(255,255,255,0.02);
  padding:18px;
  border-radius:8px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.text-page h2{margin-top:0}
.contact address{
  font-style:normal;
  line-height:1.6;
}
.hours{
  border-collapse:collapse;
  margin-top:8px;
}
.hours td{padding:4px 8px}

/* Home images */
.home-images{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:10px;
}
.img-box{flex:1 1 360px; max-width:48%;}
.img-box img{
  width:100%;
  height:auto;
  border-radius:6px;
  display:block;
  object-fit:cover;
}

/* Footer */
.site-footer{
  margin-top:28px;
  color:var(--muted);
  font-size:0.9rem;
  text-align:center;
  padding:8px 0 40px;
}

/* Responsive */
@media (max-width:900px){
  .page-wrap{flex-direction:column;}
  .sidebar{
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    overflow-x:auto;
  }
  .main-nav{
    flex-direction:row;
    gap:6px;
  }
  .main-nav a{white-space:nowrap; padding:8px 10px; border-left:0; border-bottom:3px solid transparent;}
  .main-nav a.active{border-bottom-color:var(--accent); border-left:0;}
  .content{padding:18px 16px;}
  .img-box{max-width:100%}
}
@media (max-width:460px){
  .site-header h1{font-size:1.4rem}
  .site-header .subtitle{font-size:0.9rem}
  .sidebar .logo{max-width:120px}
  .main-nav a{font-size:0.9rem}
}

.sidebar .logo-link {
  margin-bottom: 14px;					/* Abstand vom Logo zu 1. Menuepunkt */
}

a {
  color: #FFFDD0;
  text-decoration: none; /* falls du die Unterstreichung entfernen willst */
}

/* Optional: Hover-Effekt */
a:hover {
  color: #EBEAC0; /* dunklere Variante beim Überfahren */
}

/* ABSCHNITT FÜR HOLZ HINTERGRUND */

/* --- Sidebar Holz-Hintergrund ---
.sidebar {
  background-image: url("/img/bg/tapete_madera.png");
  background-size: cover;           /* füllt die Sidebar, ohne zu verzerren */
  background-position: center;      /* zentriert das Motiv */
  background-repeat: no-repeat;     /* verhindert Kacheln */
  color: #fff;                      /* weißer Text für guten Kontrast */
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* bessere Lesbarkeit */
  position: relative;               /* wichtig für Overlay (s.u.) */
}

/* Optionale leichte Abdunkelung für Lesbarkeit
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);  /* 25 % dunkles Overlay */
  z-index: 0;
}

/* Sidebar-Inhalt über das Overlay legen
.sidebar > * {
  position: relative;
  z-index: 1;
} */