/* ============================================================
   stil.css – Gabi Kretschmer · Kunstmalerin
   Layout: Seitenleiste links (Menü), rechts Kopf mit Logo + Inhalt
   ------------------------------------------------------------
   Diese Datei liegt bewusst in website\ (NICHT in der Exe):
   Der Generator schreibt nur HTML - CSS/JS werden von Hand
   gepflegt und beim Veröffentlichen automatisch mit hochgeladen.
   ============================================================ */

:root {                                   /* zentrale Design-Werte als Variablen */
  --akzent: #c2554f;                      /* warmes Rot, passt zu Mohn-Motiven */
  --text: #2a2a2a;
  --hintergrund: #D2B48C;                 /* Cappucchino, Wunsch von Gaby */
}

* { box-sizing: border-box; margin: 0; }  /* Reset; Ausnahme dialog: siehe unten */

body {
  font-family: system-ui, sans-serif;
  color: var(--text);
  background: var(--hintergrund);
  display: grid;                          /* Zweispalten-Layout */
  grid-template-columns: 260px 1fr;       /* 260px Leiste, Rest für den Inhalt */
  min-height: 100vh;
}

/* --- Seitenleiste: nur das Menü --- */
.seitenleiste {
  background: var(--hintergrund);                       /* alternativ: var(--hintergrund) für durchgehendes Cappuchino */
  border-right: 1px solid #e5ddd3;
  padding: 1.5rem 1.2rem;
  position: sticky; top: 0;               /* bleibt beim Scrollen stehen */
  height: 100vh; overflow-y: auto;        /* eigene Scrollleiste bei vielen Kategorien */
}

.menue { display: flex; flex-direction: column; }
.menue-titel { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
               color: #999; margin: 1.2rem 0 .35rem; }
.menue a { text-decoration: none; color: var(--text); padding: .4rem .6rem;
           border-radius: 6px; border-left: 3px solid transparent; }
           /* transparenter Balken als Platzhalter: beim Aktivieren "springt" nichts */
.menue a:hover { background: #f5f0e8; }
.menue a.aktiv { color: var(--akzent); border-left-color: var(--akzent);
                 background: #f5f0e8; font-weight: 600; }

/* --- Kopfbereich mit Logo (rechte Spalte, oben) --- */
.kopfbereich { text-align: center; padding: 1.5rem 1.5rem 0; }
.kopfbereich .logo { display: inline-block; }
.kopfbereich .logo img { max-width: min(100%, 700px); height: auto; display: block; }
        /* min(100%, 700px): nie breiter als 700px, schrumpft aber auf schmalen Fenstern mit */

/* --- Inhaltsbereich --- */
.inhalt { display: flex; flex-direction: column; }   /* drückt Fußzeile ans Seitenende */
main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5rem; flex: 1; }
h1 { font-weight: 300; margin-bottom: 1.5rem; }

/* --- Galerie-Raster: so viele Spalten, wie hineinpassen --- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.karte { cursor: pointer; background: #fff; border-radius: 10px; overflow: hidden;
         box-shadow: 0 2px 10px rgba(0,0,0,.08); transition: transform .15s; }
.karte:hover { transform: translateY(-4px); }
.karte img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.karte figcaption { padding: .7rem .9rem 1rem; }
.karte small { color: #777; display: block; margin-top: .2rem; }

/* --- Startseiten-Kacheln --- */
.intro { text-align: center; margin: 1rem 0 2rem; }
.intro img { max-width: 100%; height: auto; border-radius: 10px; margin: .5rem 0; }
        /* Inhaltsbilder aus dem Editor (website\bilder\inhalt\) */
.kachelwand { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.kachel { position: relative; border-radius: 10px; overflow: hidden; text-decoration: none; }
.kachel img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform .3s; }
.kachel:hover img { transform: scale(1.05); }
.kachel span { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem;
               background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; }
.kachel em { font-style: normal; opacity: .8; font-size: .85em; margin-left: .4rem; }

/* --- Lightbox (Großansicht) --- */
dialog { border: none; border-radius: 12px; padding: 0; max-width: min(95vw, 1100px);
         margin: auto; max-height: 92vh; }
         /* margin:auto stellt die Browser-Zentrierung wieder her, die der
            *-Reset oben (margin:0) sonst kaputtmachen würde! */
dialog::backdrop { background: rgba(0,0,0,.75); }
#lb-bild { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; }
#lb-info { padding: 1rem 1.5rem 1.5rem; }
#lb-zu { position: absolute; top: .5rem; right: .5rem; font-size: 1.5rem; border: none;
         background: rgba(255,255,255,.85); border-radius: 50%; width: 2.2rem; height: 2.2rem; cursor: pointer; }

/* --- Textseiten (Über mich, Kontakt, Impressum) --- */
.textseite { max-width: 720px; margin: 0 auto; line-height: 1.7; }
.textseite p { margin-bottom: 1rem; }
.kontaktzeile { margin-top: 1.5rem; font-size: 1.1rem; }

/* --- WYSIWYG-Inhaltsseiten (Referenzen) --- */
.textinhalt { max-width: 800px; margin: 0 auto; line-height: 1.7; }
.textinhalt p { margin-bottom: 1rem; }
.textinhalt img { max-width: 100%; height: auto; border-radius: 10px; margin: .5rem 0; }
.textinhalt table { width: 100%; border-collapse: collapse; margin: 1rem 0; background: #fff; }
.textinhalt td { border: 1px solid #ddd; padding: .5rem .7rem; }

/* --- Terminliste --- */
.terminliste { list-style: none; padding: 0; max-width: 720px; margin: 0 auto; }
.terminliste li { display: flex; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid #e5ddd3; }
.datum { color: var(--akzent); font-weight: 600; white-space: nowrap; }
.terminliste small { color: #777; display: block; }

/* --- Fußzeile --- */
.fuss { text-align: center; padding: 2rem; color: #888; }
.fuss a { color: inherit; }

/* ============================================================
   Schmale Bildschirme (Handy): einspaltig, Menü oben
   ============================================================ */
@media (max-width: 720px) {
  body { grid-template-columns: 1fr; }
  .seitenleiste { position: static; height: auto; border-right: none;
                  border-bottom: 1px solid #e5ddd3; }
  .menue { flex-direction: row; flex-wrap: wrap; gap: .3rem; }
  .menue-titel { width: 100%; }
  .menue a { border-left: none; }
  .menue a.aktiv { border-left: none; }
}