/* 
================================
Design Plan - Website CSS
================================
-> Strukturierung der CSS-Datei in Module in menschenlesbare Abschnitte

01 Reset
02 Base (Grundfarben, Schriftarten)
03 Layout (Container, Grids, Header, Footer)
04 Typografie (Überschriften, Absätze, Listen)
05 Navigation (Menüs, Sidebar)
06 Formulare (Inputs, Buttons)
07 Komponenten (Cards, Boxen, Slider)
08 Medien (Bilder, Videos, Galerien)
09 Utilities (Hilfsklassen)
10 Responsive (Media Queries)

--- 01 Reset ---


--- 02 Base ---

- Color Palette:
  - Primary Color: #3498db (Blue)
  - Secondary Color: #2ecc71 (Green)
  - Accent Color: #e74c3c (Red)
  - Background Color: #f5f5f5 (Light Grey)
  - Text Color: #333333 (Dark Grey)
  - Light Text Color: #777777 (Medium Grey)
  - Border Color: #dddddd (Light Grey)

- Google Fonts: 
  - Font 1: 'Roboto', sans-serif; (Body text)
  - Font 2: 'Merriweather', serif; (Headings)


--- 03 Typography ---


- Font sizes (px):
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights:
  - Body text: 400 (Regular)
  - Headings: 700 (Bold)

- Line height:
  - Body text: 1.6
  - Headings: 1.2


--- 05 Navigation ---

- Menu Styles:
  - Background Color: #ffffff (White)
  - Text Color: #333333 (Dark Grey)
  - Hover Color: #3498db (Blue)

- Sidebar Styles:
  - Background Color: #f5f5f5 (Light Grey)
  - Text Color: #333333 (Dark Grey)


--- 06 Formulare ---

--- 08 Medien ---

--- 09 Utilities ---

--- 10 Responsive ---

*/


/* =========================
   GOOGLE FONTS IMPORT
========================= */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=PT+Serif:wght@400;700&display=swap');

/* =========================
   ROOT VARIABLES
========================= */

:root {
  --hauptfarbe: #3498db; /* Blau */
  --sekundaerfarbe: #cfcfcf; /* Grau */
  --akzentfarbe: #e74c3c; /* Rot */
  --hintergrundfarbe: #ffffff; /* Weiß */
  --textfarbe: #000000; /* Schwarz */
  --schriftgröße-klein: 1rem;
  --schriftgröße-mittel: 1.115rem;
  --schriftgröße-groß: 1.25rem;
  --schriftart-körper: 'Open Sans', sans-serif;

}

body {
  font-family: var(--schriftart-körper);
  font-size: var(--schriftgröße-mittel);
  line-height: 1.6;
  color: var(--textfarbe);
  background-color: var(--hintergrundfarbe);
  margin: 0;
  padding: 0;
}

header {
  background-color: var(--sekundaerfarbe);
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
  width: 100%;

}


/* =========================
   03 Layout
========================= */

/* Basis-Grid für Mobil */
.grid-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1rem;
  gap: 0.75rem;
  box-sizing: border-box;
}

/* Spaltenbreiten */
.col-2 { grid-column: span 4; background-color: red;}
.col-3 { grid-column: span 4; background-color: blue;}
.col-4 { grid-column: span 4; background-color: green;}
.col-6 { grid-column: span 4; background-color: orange;}
.col-8 { grid-column: span 4; background-color: purple;}
.col-12 { grid-column: span 4; background-color: pink;}

/* Flexbox System */

.flex {
  display: flex;
}

/* Ausrichtungen */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

/* Justify Content (Hauptachse) */
.flex-start   { justify-content: flex-start; }
.flex-center  { justify-content: center; }
.flex-end     { justify-content: flex-end; }
.flex-between { justify-content: space-between; }
.flex-around  { justify-content: space-around; }

/* Align Items (Querachse) */
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }

/* Wrap & Gap */
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }

/* =========================
   04 Typografie
========================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--schriftart-kopfzeile);
  font-weight: 700;
  line-height: 1.2;
}

p {
  font-family: var(--schriftart-körper);
  font-weight: 400;
  line-height: 1.6;
}
a {
  color: var(--hauptfarbe);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/*==========================
   05 Navigation
========================== */

.navigation-list-header {
    list-style: none;          
    display: flex;
    justify-content: flex-end;  /* Zentriert die Listenelemente rechts */
    gap: 20px;                 /* Abstand zwischen den Listenelementen */
}

.navigation-list-element a {
    text-decoration: none;      /* Entfernt Unterstreichung */
    color: var(--textfarbe);    /* Textfarbe aus Root-Variable */
    font-family: var(--schriftart-körper);
    font-size: var(--schriftgröße-mittel);
    padding: 5px 10px;          /* Klickbarer Bereich vergrößern */
    transition: color 0.3s;
}

.navigation-list-element a:hover {
    color: var(--hauptfarbe);   /* Hover-Effekt */
}

/* =========================
   10 Media Queries
========================= */


/* Standard: Mobile */
@media (max-width: 480px) {
  body {
    flex-direction: column;
    gap: 1rem;
    font-size: var(--schriftgröße-klein);
    width: 100%;
  }
  
  .navigation-list-header {
    flex-direction: column; /* Navigation untereinander */
    align-items: flex-end; /* Rechts ausrichten */
  }

  .projects-list {
    flex-direction: column; /* untereinander */
  }
  
}



/* Ab 760px – Tablet oder Desktop */
@media (min-width: 760px) {
  body {
    flex-direction: row; /* Projekte nebeneinander */
    font-size: var(--schriftgröße-mittel);
    width: 100%;
  }
  
  .navigation-list-header {
    flex-direction: row; 
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
  }

  .grid-section {
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem; /* ~16px */
    padding: 1.5rem;
  }

  .projects-list {
    flex-direction: row; /* Nebeneinander */
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
  }

  .project-item {
    width: 50%;
  }

  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-6 { grid-column: span 6; }
  .col-8 { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
}

/* Ab 1280px – Großer Desktop */
@media (min-width: 1280px) {
 
  body {
    gap: 2rem;
    font-size: var(--schriftgröße-groß);
    width: 100%;
  }

  .grid-section {
    grid-template-columns: repeat(12, 1fr); /* 12 Spalten */
    gap: 1.25rem; /* ~20px */
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
  }

  .projects-list {
    flex-direction: row; /* Nebeneinander */
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
  }

  .project-item {
    width: 50%;               /* maximal die Hälfte des Viewports */
    max-width: 600px;      
  }

  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-6 { grid-column: span 6; }
  .col-8 { grid-column: span 8; }
  .col-12 { grid-column: span 12; }

}