/*
Theme Name: Neuwerk ID 2026
Author: Julius Borkowski
Author URI: https://borkograph.de
Description: Theme für die Hauptseite des Projekt-Archivs
Version: 1.1
Text Domain: neuwerk-id-2026
*/


/* ==================================================
   CSS VARIABLES
================================================== */

:root {
  --primary-color: #fff;
  --font-color-dark: #000;
  --font-color-grey: #999;
  --font-color-grey-rgb: 153,153,153;

  --font-regular: "Noto Sans";

  --font-size-logo: 26px;
  --font-size-logo-description: 12px;
  --font-size-menu: 12px;
  --font-size-titel: 16px;
  --font-size-text: 16px;
  --font-size-logo-on-mobile: 24px;
  --font-size-logo-description-on-mobile: 14px;
  --font-size-menu-on-mobile: 14px;
  --font-size-titel-on-mobile: 14px;
  --font-size-text-on-mobile: 14px;

  --content-width: 805px;
  --content-width-2-col: 395px;
  --content-width-1-col: 190px;

  --columns-on-desktop: 4;
  --columns-on-medium: 3;
  --columns-on-mobile: 2;
  --columns-on-mini-mobile: 1;

  --column-width: 190px;
  --column-width-on-mobile: 190px;
  --column-gap: 15px;

  --tile-height-big: 135px;
  --tile-height-small: 60px;
  --tile-height-big-on-mobile: 135px;
  --tile-height-small-on-mobile: 60px;
  --tile-aspect-ratio-big: 190/135;
  --tile-aspect-ratio-small: 190/60;
  --tile-aspect-ratio-big-reziproke: 135/190;
  --tile-aspect-ratio-small-reziproke: 60/190;

  --animation: 0.35s ease;
}


/* ==================================================
   FONTS
================================================== */

@font-face {
  font-family: 'Noto Sans';
  src: url('assets/fonts/Noto_Sans/NotoSans-Regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('assets/fonts/Noto_Sans/NotoSans-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('assets/fonts/Noto_Sans/NotoSans-Italic-webfont.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('assets/fonts/Noto_Sans/NotoSans-BoldItalic-webfont.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}


/* ==================================================
   RESET / BASE
================================================== */

h1, h2, h3, h4, h5, h6,
p, span, body, div, a, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}


/* ==================================================
   TYPOGRAPHY & BASE ELEMENTS
================================================== */

body {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--column-gap);
  font-family: var(--font-regular);
  font-size: var(--font-size-text);
  color: var(--font-color-dark);
  background-color: var(--primary-color);
}

main{
	overflow: hidden;
}
/*
p {
  margin-bottom: var(--column-gap);
}
*/
a {
  color: var(--font-color-grey);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--animation), opacity var(--animation); /* Animation */
  opacity: 1;
}

a:hover {
  opacity: 0.6;
}

.page-title a{
  color: var(--font-color-dark);
  font-weight: 400;
}

h1, h2 {
  font-size: var(--font-size-logo);
  font-weight: 400;
}

h3, h4, h5, h6 {
  font-size: var(--font-size-titel);
  font-weight: 400;
}

hr {
  border: 0;
  border-top: 1px solid var(--font-color-dark);
  margin: 0 0 var(--column-gap) 0;
  color: var(--font-color-dark);
  
}

img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

a img {
  transition: transform var(--animation);
}

a img:hover{
  transform: scale(0.98);
}


/* ==================================================
   LAYOUT / GRID SYSTEM
================================================== */

.site-container,
.row {
  display: grid;
  grid-template-columns: repeat(var(--columns-on-desktop), 1fr);
  column-gap: var(--column-gap);
  row-gap: var(--column-gap);
  width: 100%;
  max-width: var(--content-width);
  box-sizing: border-box;
}

.site-container > *,
.row > * {
    min-width: 0;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }

.col-full { grid-column: span var(--columns-on-desktop); }
.col-full-minus-1 { grid-column: span calc(var(--columns-on-desktop) - 1); }

.tile {
  box-sizing: border-box;
}

.tile.small { min-height: var(--tile-height-small); }
.tile.large { min-height: var(--tile-height-big); }

.tile.small.fixed-height { height: var(--tile-height-small); }
.tile.large.fixed-height { height: var(--tile-height-big); }

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 935px) {
  .site-container,
  .row {
    grid-template-columns: repeat(var(--columns-on-medium), 1fr);
    max-width: calc(var(--columns-on-medium) * var(--column-width) + (var(--columns-on-medium) - 1) * var(--column-gap));
  }

  .col-1 { grid-column: span 1; }
  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span var(--columns-on-medium); }

  .col-full { grid-column: span var(--columns-on-medium); }
  .col-full-minus-1 { grid-column: span calc(var(--columns-on-medium) - 1); }

  .col-1-m { grid-column: span 1; }
  .col-2-m { grid-column: span 2; }
  .col-3-m { grid-column: span 3; }
}


@media (max-width: 768px) {
  .site-container,
  .row {
    grid-template-columns: repeat(var(--columns-on-mobile), 1fr);
    max-width: calc(var(--columns-on-mobile) * var(--column-width-on-mobile) + (var(--columns-on-mobile) - 1) * var(--column-gap));
  }

  .col-1 { grid-column: span 1; }
  .col-2 { grid-column: span var(--columns-on-mobile); }
  .col-3 { grid-column: span var(--columns-on-mobile); }

  .col-full { grid-column: span var(--columns-on-mobile); }
  .col-full-minus-1 { grid-column: span calc(var(--columns-on-mobile) - 1); }

  .col-1-m { grid-column: span 1; }
  .col-2-m { grid-column: span 2; }
  .col-3-m { grid-column: span 3; }

  body {
  font-size: var(--font-size-text-on-mobile);
}

h1, h2 {
  font-size: var(--font-size-logo-on-mobile);
}

h3, h4, h5, h6 {
  font-size: var(--font-size-titel-on-mobile);
}
}

@media (max-width: 270px) {
  .site-container,
  .row {
    grid-template-columns: repeat(var(--columns-on-mini-mobile), 1fr);
    max-width: calc(var(--columns-on-mini-mobile) * var(--column-width-on-mobile));
  }

  .col-1, .col-2, .col-3, .col-full, .col-full-minus-1 { grid-column: span 1; }
}