/*
--------------------------------------------------------------------------------
© by Volker Erich Sachs
  Stand:  Di 14.07.2026
--------------------------------------------------------------------------------
Links:

https://wiki.selfhtml.org/wiki/CSS
https://developer.mozilla.org/de/docs/Web/CSS
https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/gradient/linear-gradient

https://www.w3schools.com/CSSref/css_selectors.php

https://www.ionos.de/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/#content-trennung-von-inhalt-und-praesentation

https://www.html-seminar.de

*/

/*------------------------------------------------------------------------------
   Basis & Anthrazit-Metallic Diagonalverlauf des Hintergrundes
------------------------------------------------------------------------------*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  color: #d3d3d3;
  font-size: 19px;
  line-height: 1.5;
  margin: 0;
  padding: 1em;
  /* Abstand der Webelemente zum Fensterrand global auf 1em */
  min-height: 100vh;

  /* Anthrazit-Farbverlauf  */
  background-image: linear-gradient(45deg,
      #000000 0%,
      #363636 34%,
      #0a0a0a 47%,
      #3d3d3d 82%,
      #1b1b1b 100%);
  background-attachment: fixed;
}

a {
  color: #91c5fc;
  /* Links in Hellblau */
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}

a:hover,
a:active {
  color: #7cfc00;
  /* angeklickte Links in Hellgrün */
  text-decoration: underline;
}

strong {
  font-weight: bold;
}


#aktueller-text {
  /* harmonischer Zeilenumbruch und Festlegung dynamische Schriftgrößen bei unterschiedlicher Bildschirmbreite */
  text-wrap: balance;
  font-size: clamp(1rem, 2vw, 4rem);
}

/*------------------------------------------------------------------------------
   Web-Fonts / Icons einbinden
------------------------------------------------------------------------------*/

/* symbolische Namen für Symbole in WebFont */
:root {
  --icon-home: "\F015";
  --icon-smartphone: "\F2E1";
  /* --icon-smartphone: "\F10B"; */
  --icon-lampe: "\F0EB";
}

/* Schriftart einbinden */
@font-face {
  font-family: 'WebFonts';
  src: url('fonts/webfont.woff2') format('woff2');
}

/* gemeinsame Basisklasse für ALLE Icons */
.icon::before {
  font-family: 'WebFonts';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
}

/* hier den Inhalt für das jeweilige Icon zuweisen */
.home::before {
  content: var(--icon-home);
}

.smartphone::before {
  content: var(--icon-smartphone);
}

.lampe::before {
  content: var(--icon-lampe);
}


/*------------------------------------------------------------------------------
   HAUPTCONTAINER (Breitenbegrenzung und Abstände)
------------------------------------------------------------------------------*/
.main-container {
  max-width: 100%;
  /* volle Displaybreite eines Notebooks! */
  margin: 0 auto;
  padding: 0px 60px;
  /* Seitlichen Abstand auf großen Bildschirmen minimiert für breiteres Layout */
}

/*------------------------------------------------------------------------------
   zentrierte "AKTUELLES"-Box
------------------------------------------------------------------------------*/
.aktuelles-box {
  width: 100%;
  /* Nutzt die volle verfügbare Breite des Containers */
  max-width: 100%;
  /* Richtet sich perfekt nach dem Fließtext aus */
  margin: 20px auto 30px auto;
  /* Zentriert die Box auf der Seite */
  padding: 20px 30px;
  font-size: 19px;
  text-align: center;
  /* Zentriert sämtlichen Text & Grafiken im Inneren */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  /* dezent dunkelgoldener Hintergrund */
  background-color: rgba(213, 170, 39, 0.05);

}

.aktuelles-box p {
  text-align: center;
  /* Zentrierung der Zeilen */
  margin-bottom: 15px;
}

/*------------------------------------------------------------------------------
   symbolische Namen für Schriftfarben im html-Dokument
------------------------------------------------------------------------------*/
.highlight-title {
  color: #cbbfff;
  font-size: 32px;
  font-size: clamp(1.4rem, 3vw, 4rem);
  margin-bottom: 0.4rem;
}

.highlight-title .icon.lampe {
  /* eigene goldgelbe Farbe für die Lampe */
  color: #FDBC6A;
}

.light-green {
  color: #c7fc7e;
}

.light-green-bold {
  color: #c7fc7e;
  font-weight: bold;
}

.light-green-large {
  color: #7cfc00;
  font-size: 19px;
}

.soft-green-text {
  color: #e0fbc8;
  font-size: 16px;
}

.orange-text {
  color: #f3c07b;
}

.orange-bold {
  color: #f5ce98;
  font-weight: bold;
}

.cream-text {
  color: #fddcca;
}

.white-text {
  color: #f5f5f5;
}

.special-notice {
  color: #fddcca;
  margin-bottom: 15px;
}

.permissions-header {
  color: #f5f5f5;
  margin-bottom: 8px;
}

.permissions-list p {
  color: #f5f5f5 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  /* zwingt die Zeilenhöhe auf das absolute Minimum */
  margin: -3px 0 !important;
  /* rückt die Zeilen durch negativen Abstand extrem nah zusammen */
  padding: 0 !important;
}

.policy-link {
  margin-top: 8px;
}

.policy-link a {
  font-style: italic;
}

.text-content p {
  text-align: left;
  /* linksbündiger Text */
  margin-bottom: 18px;
}

/*------------------------------------------------------------------------------
Titel der Homepage
------------------------------------------------------------------------------*/
.logo-title {
  line-height: 1.2;
  font-size: 32px;
  margin-bottom: 0.6em;

  /* Der 45°-Farbverlauf  */
  background-image: linear-gradient(45deg, #ffd89e, #ffb04f, #ffdfa7);

  /* Schneidet den Hintergrund exakt auf die Buchstabenwände zu */
  background-clip: text;
  -webkit-background-clip: text;

  /* Macht die Standard-Textfarbe unsichtbar, damit der Verlauf durchscheint */
  color: transparent;

  /* Sorgt für eine saubere Darstellung in älteren Browsern */
  display: inline-block;
}

/* WICHTIG: Zwingt das fette Wort, den Verlauf exakt mitzugehen */
.logo-title strong {
  color: inherit;
}

/*------------------------------------------------------------------------------
   Menü mit Buttons
------------------------------------------------------------------------------*/
header {
  width: 100%;
  padding: 8px 0;
  text-align: center;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.HomeMenu {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.nav-link {
  display: block;
  width: 160px;
  background-color: rgba(30, 30, 30, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #d3d3d3;

  font-size: 20px;
  line-height: 1.0;
  text-decoration: none;
  text-align: center;

  /* HIER GEÄNDERT: Unten 1em Innenabstand, oben/links/rechts 0 */
  padding: 0 0 0.4em 0;

  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}

.nav-link i {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  font-size: 40px;
  line-height: 1;
  /* Abstand zwischen Icon und Text */
  margin: 0 0 -20px 0;

  /* Hellgrau */
  text-decoration: none;
  padding: 4px;

  text-align: center;
  /* vertikale Zentrierung */
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}


.nav-link:hover {
  background-color: rgba(113, 255, 100, 0.1);
  border-color: #7efc0055;
  border-radius: 16px;
  color: #7cfc00;
  text-decoration: none;
  transform: scale(1.06);
}

/*------------------------------------------------------------------------------
   GEZIELTE VERGRÖSSERUNG DER AB-SÄTZE UNTER DEM PLAYSTORE-BUTTON
------------------------------------------------------------------------------*/
.info-text p {
  font-size: 20px !important;
  /* Kräftige Schriftgröße für die App-Beschreibung */
  line-height: 1.5 !important;
  /* Angenehmer Zeilenabstand */
  margin-bottom: 2em;
}

/*------------------------------------------------------------------------------
   Beschreibungs-Text
------------------------------------------------------------------------------*/
.app-banner {
  margin: 15px 0 5px 0;
  text-align: center;
}

.responsive-img {
  max-width: 100%;
  height: auto;
}

.footnote {
  margin-top: 8px;
  line-height: 1em;
}

/* QR-Code Sektion */
.qr-section {
  margin: 30px 0;
  text-align: center;
}

.qr-image {
  width: 100%;
  max-width: 320px;
  /* Originalbreite des Bildes */

  height: auto;
  display: block;
  margin: 0 auto;
}

.qr-text {
  font-size: 19px;
  color: #d3d3d3;
  margin-top: 8px;
}

.separator {
  border: 1px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  margin: 24px 0;
}

/*------------------------------------------------------------------------------
   Screenshot Grid-Gallerie
------------------------------------------------------------------------------*/
.gallery-title {
  color: #d3d3d3;
  font-size: 27px;
  margin-bottom: 16px;
  text-align: center;
}

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  justify-items: center;
}

.screenshot-item {
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin-bottom: 16px;
}

.screenshot-item img {
  width: 100%;
  max-width: 400px;
  height: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}

.screenshot-item p {
  font-size: 19px;
  color: #d3d3d3;
  line-height: 1.3;
}

/*------------------------------------------------------------------------------
   Fußzeile
------------------------------------------------------------------------------*/
footer {
  text-align: center;
  padding: 8px 20px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.no-Cookies {
  color: #f9b980;
  font-size: 16px;
  margin-bottom: 2px;
}

.stand-Datum {
  color: #a9a9a9;
  font-size: 16px;
}

/*------------------------------------------------------------------------------
   SCROLL BUTTONS
------------------------------------------------------------------------------*/
.scroll-btn {
  position: fixed;
  right: 10px;
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  color: #ffffffa0;
  font-size: 30px;
  /* font-weight: 200; */
  text-align: center;
  line-height: 36px;
  text-decoration: none;
  z-index: 200;
}

.scroll-btn:hover {
  text-decoration: none;
  color: #7cfc00;
  background: rgba(0, 0, 0, 0.7);
  border-color: #7cfc00;
}

.scroll-down {
  top: 54px;
}

.scroll-top {
  /* bottom: 10px; */
  top: 10px;


}

/*------------------------------------------------------------------------------
   RESPONSIVE DESIGN (MEDIA QUERIES)
------------------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
  .screenshot-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media screen and (max-width: 800px) {
  body {
    font-size: 16px;
    padding: 0.5em;
    /* Mobil etwas kompakterer Abstand zum echten Bildschirmrand */
  }

  .main-container {
    padding: 0px 8px;
    /* Schützt Inhalte vor dem Anstoßen auf Mobilgeräten */
  }

  .aktuelles-box {
    padding: 15px;
    margin: 20px 0px 25px 0px;
    /* Beseitigt unschöne doppelte Abstände im mobilen Zustand */
  }

  .screenshot-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .screenshot-item {
    max-width: 100%;
  }
}

/*------------------------------------------------------------------------------
   Google PlayStore Zoom-in/Zoom-out Animation (PUSH-Effekt)
------------------------------------------------------------------------------*/
#imgGooglePlayStore {
  display: inline-block !important;
  max-width: 320px !important;
  width: 100%;
  height: auto;

  animation-name: push;
  animation-duration: 6000ms;
  animation-delay: 1000ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;

  transform-origin: center center;
  will-change: transform;
}

@keyframes push {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.85);
  }
}