/* In this css-file we will put the style definitions for the Christmas-cards part

	Created on or before 2026-10-03, © DoJoBa-Verlag
	Last update on 		 2026-10-07, © DoJoBa-Verlag
*/

    /*
     * Sehr wichtig:
     * Dadurch funktioniert hidden auch dann korrekt,
     * wenn ein Element zusätzlich display:flex besitzt.
     */
    [hidden] {
      display: none !important;
    }

	:root {
	  --oberer-bereich: 155px;
	}

    * {
      box-sizing: border-box;
    }

	body {
		max-width: 894px;
		margin: 0 auto;
		overflow-x: hidden;
    }

    button {
      border: 0;
      border-radius: 8px;
      padding: 9px 13px;
      background: #333;
      color: #E16525;
      font-size: 15px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    button:hover:not(:disabled) {
      background: #555;
    }

    button:disabled {
      opacity: 0.25;
      cursor: default;
    }

    /*
     * Übersicht
     */

    #uebersicht {
      min-height: 100vh;
	  
      padding: 15px 18px;
    }

    #uebersicht h1 {
      margin: 0 0 25px;
      text-align: center;
      font-size: 28px;
      font-weight: normal;
    }

    .gruppen {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 22px;
      max-width: 894px;
      margin: 0 auto;
    }

    .gruppe {
      overflow: hidden;
      border-radius: 12px;
      background: #222;
      color: #E16525;
      cursor: pointer;
      transition:
        transform 0.45s ease,
        box-shadow 0.25s ease;
    }

    .gruppe:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }

    .gruppe:focus {
      outline: 3px solid #6ca8ff;
      outline-offset: 3px;
    }

	.gruppe-vorschau {
	  display: block;
	  width: 100%;
	  height: 180px;

	  object-fit: contain;
	  background: #303030;
	}

    .gruppe-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px;
      font-size: 15px;
    }

    .anzahl-bilder {
      color: #E16525;
      font-size: 14px;
    }

    /*
     * Einzelansicht
     */

    #einzelansicht {
      display: flex;
      flex-direction: column;

      /*
       * 100dvh berücksichtigt auf Smartphones
       * die tatsächlich sichtbare Bildschirmhöhe.
       */
      width: 100%;
	  
/*  height: calc(100vh - var(--oberer-bereich));
  height: calc(100dvh - var(--oberer-bereich));
*/      height: 100vh;
      height: 100dvh;

      min-height: 0;
      overflow: hidden;
    }

    .kopfzeile {
      flex: 0 0 auto;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;

      min-height: 56px;
      padding: 8px 14px;
      background: #191919;
    }

    .kopfzeile h1 {
      flex: 1;
      margin: 0;
      text-align: center;
      font-size: 21px;
      font-weight: bold;
    }

    #position {
      min-width: 45px;
      text-align: right;
      color: #E16525;
      font-size: 14px;
    }

    /*
     * Der Bildbereich nimmt nur den Platz ein,
     * der zwischen Kopfzeile und Pfeilen übrig bleibt.
     */
    .bild-bereich {
      position: relative;

      flex: 1 1 auto;
      min-height: 0;

      overflow: hidden;
      touch-action: none;
      background: #111;
    }

    .bild {
      position: absolute;
      inset: 0;

      width: 100%;
      height: 100%;
      padding: 10px;

      object-fit: contain;
      user-select: none;
      pointer-events: none;
      -webkit-user-drag: none;

      transition:
        transform 820ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /*
     * Startposition des neuen Bildes
     */

    .bild.start-links {
      transform: translateX(-100%);
    }

    .bild.start-rechts {
      transform: translateX(100%);
    }

    .bild.start-oben {
      transform: translateY(-100%);
    }

    .bild.start-unten {
      transform: translateY(100%);
    }

    /*
     * Endposition des alten Bildes
     */

    .bild.ende-links {
      transform: translateX(100%);
    }

    .bild.ende-rechts {
      transform: translateX(-100%);
    }

    .bild.ende-oben {
      transform: translateY(100%);
    }

    .bild.ende-unten {
      transform: translateY(-100%);
    }

    /*
     * Pfeilnavigation
     */

    .steuerung {
      flex: 0 0 auto;

      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 40px 40px;

      width: 140px;
      height: 84px;
      gap: 4px;

      margin: 6px auto 2px;
    }

    .steuerung button {
      justify-self: center;

      width: 40px;
      height: 40px;
      padding: 0;

      font-size: 21px;
    }

    #btn-oben {
      grid-column: 2;
      grid-row: 1;
    }

    #btn-links {
      grid-column: 1;
      grid-row: 2;
    }

    #btn-rechts {
      grid-column: 3;
      grid-row: 2;
    }

    #btn-unten {
      grid-column: 2;
      grid-row: 2;
    }

    .informationen {
      flex: 0 0 auto;

      min-height: 20px;
      padding: 2px 8px 5px;

      color: #E16525;
      text-align: center;
      font-size: 12px;
    }

    /*
     * Kleine Bildschirme
     */

    @media (max-width: 600px) {
      #uebersicht {
        padding: 20px 14px;
      }

      #uebersicht h1 {
        font-size: 24px;
      }

      .kopfzeile {
        min-height: 50px;
        padding: 6px 9px;
      }

      .kopfzeile h1 {
        font-size: 17px;
      }

      #btn-zurueck {
        padding: 8px 9px;
        font-size: 13px;
      }

      #position {
        min-width: 35px;
        font-size: 12px;
      }

      .bild {
        padding: 3px;
      }

      .steuerung {
        width: 130px;
        height: 78px;
        grid-template-rows: 37px 37px;
        margin-top: 4px;
      }

      .steuerung button {
        width: 37px;
        height: 37px;
        font-size: 19px;
      }

      .informationen {
        display: none;
      }
    }