/********************************************************************/
/* CSS Styles fuer gwkün mit ü                                      */
/* 09.09.2025 - v1.0 / 4spaltiges grid, responsiv                   */
/*                                                                  */
/********************************************************************/

/* Farb-Palette als CSS-Variable */
:root {
    --blau-primary: #0033A0;
    --blau-secondary: #66B2FF;
    --blau-accent: #00BFFF;
    --blau-light: #E6F2FF;
    --blau-contrast: #001F4D;
  }

* {
	margin: 0;
	padding: 0;
    font-family:Calibri,Arial, Sans-Serif;
}

html { height: 100%}

/* responsive Deklarationen ***********/

/* 1spaltiges grid f�r Smartphones */
body {
      height: 100%;
      width: 100%;
      max-width: 1200px;       /* Begrenzung Seitenbreite ... */
      margin: 0 auto;          /* ... und Zentrierung */
      background-color: var(--blau-light);
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:    "oben"
                              "navi"
                              "seite"
                              "haupt"
                              "unten";
  }

/* 2spaltiges grid f�r Tablets */
@media (min-width:30em)
{
  body {
      height: 100%;
      width: 100%;
      background-color: var(--blau-light);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas:    "oben oben"
                              "navi seite"
                              "haupt haupt"
                              "haupt haupt"
                              "unten unten";
  }
}

/* 4spaltiges grid f�r PC und Laptop */
@media (min-width:50em)
{
  body {
      min-height: 100vh;
      width:100%;
      background-color: var(--blau-light);
      font-size: 1.05em;
      display: grid;
      grid: "oben oben oben oben"        200px
            "navi haupt haupt haupt"     min-content
            "seite haupt haupt haupt"    min-content
            "seite haupt haupt haupt"    min-content
            "unten unten unten unten"    auto         /* sticky footer */
            / 1fr   1fr   1fr   1fr;
  }
}

h1 {
    text-align:center;
    animation: wackeln 2s infinite ease-in-out;
}

h5 {
    text-align:right;
}

a {
    color: var(--blau-light);
  }
a:hover {
    color: var(--blau-accent);
  }

ul {
    list-style-type: none;
  }

 /****** header *****************************************************/
header {
    background-color: var(--blau-primary);
    color: white;
    grid-area: oben;
    padding: 20px;
}

#header-box {
    display: flex;
    align-items: center;
    justify-content: center;    
}

#header-box div:nth-child(1) {
    flex: 1;       /* 1 Anteil von 1+2 = 1/3 */
}
#header-box div:nth-child(2) {
    flex: 2;       /* 2 Anteile von 1+2 = 2/3 */
}
/********************************************************************/
main    {
    background-color: var(--blau-secondary);
    color: var(--blau-contrast); /* Dunkelblau für Text */
    grid-area: haupt;
    padding: 20px;
}

main a {
    color: var(--blau-light); /* Standardfarbe */
    text-decoration: none;
    transition: color 0.3s ease;
}

main a:hover {
    color: var(--blau-contrast); /* Hover-Farbton */
    text-decoration: underline;
}

.bild {
    margin:20px;
    max-width:95%;
    height: auto;
}

nav     {
    background-color:var(--blau-contrast); /* Dunkelblau */
    grid-area: navi;
    padding: 20px;
}

nav a {
    color: var(--blau-light);
  }
  nav a:hover {
    color: var(--blau-accent);
  }


aside   {
    background: linear-gradient(to bottom, #CFE8FF, var(--blau-light));
    color: var(--blau-contrast);
    grid-area: seite;
    padding: 20px;
}

aside a {
    color: var(--blau-primary); /* Königsblau für gute Lesbarkeit */
    text-decoration: none;
}

aside a:hover {
    color: var(--blau-accent); /* Türkisblau als Akzent */
    text-decoration: underline;
}

 /* footer - Einstellungen *************************************************/
footer  {
    background-color: var(--blau-primary);
    color: white;
    grid-area: unten;
    padding: 20px;
}

footer a {
    color: var(--blau-light);
    text-decoration: none;
}

footer a:hover {
    color: var(--blau-accent);
    text-decoration: underline;
}

@media (min-width:35em) {

  #footer-box {
      display: flex;    
  }
  
  #footer-box div:nth-child(1) {
      flex: 1;              /* jede Box 1 Anteil = gleich gro� */
  }
  #footer-box div:nth-child(2) {
      flex: 1;
  }
  #footer-box div:nth-child(3) {
      flex: 1;
  }
}

/* manche links sollen nicht sofort bemerkt werden */
.nolink a:link { text-decoration: none; }
.nolink a:visited { text-decoration: none; }
.nolink a:active { text-decoration: none; }
.nolink a:hover { text-decoration: underline; }

/******************************************************/
/* Animation des Textes im header                     */

@keyframes wackeln {
    0% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
    100% { transform: rotate(-2deg); }
  }