/* ==============================================================
   Zeitrechner, Variante Laura
   Version: 1.0.1
   © 2025 rhs <huhu@laura-emily.de>
   Lizenz: CC BY-NC-SA 4.0
   ============================================================== */

/* Grundlayout – Flexbox, mittig zentriert */
html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/*  background: #f5f7fa;*/
  background: #121212; /* dunkler Hintergrund, kein weiß mehr */
  color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container für die Ausgabe */
#app {
/*  max-width: 420px;*/
  max-width: 1420px;
  width: 90%;
  background: #000;
/*  background: #fff;*/
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  padding: 1.5rem;
}

/* Titel */
h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  text-align: center;
}

h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-align: center;
}

h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Tabellen‑ähnliche Ausgabe ohne <table> */
.output {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: .05rem;
  column-gap: .8rem;
  font-size: .95rem;
}
.output div:nth-child(even) {
  text-align: right;
  font-weight: 600;
}

/* Refresh‑Button */
button {
  margin-top: 1rem;
  width: 100%;
  padding: .6rem;
  font-size: .95rem;
  background: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 6px;
}
button:hover { background: #34495e; }

/* Bild zentrieren und responsiv skalieren */
.center-img {
    display: block;               /* Bild wird zu einem Block‑Element → margin wirkt */
    margin: 0 auto 1.5rem;        /* oben/unten: 0, horizontal auto = zentriert,
                                    unten ein Abstand zum nächsten Element */
    max-width: 80%;               /* Bild darf höchstens 80 % der Karten‑Breite einnehmen */
    height: auto;                 /* Höhe proportional zur Breite */
    border-radius: 8px;           /* optional: leicht abgerundete Ecken */
}

/* -------------------------------------------------
   E‑Mail‑Link unter dem Refresh‑Button
   ------------------------------------------------- */
.mailto-link {
    display: block;               /* Zeile für Zeile, damit margin wirkt */
    margin: 0.8rem auto 0;        /* Abstand nach oben, zentriert (auto) */
    text-align: center;           /* Text zentrieren */
    font-size: 0.94rem;           /* leicht kleiner als Button‑Text */
    color: #2c3e50;               /* gleiche Farbe wie übriger Text */
    text-decoration: none;        /* kein Unterstrich */
}

.mailto-link:hover,
.mailto-link:focus {
    text-decoration: underline;   /* Unterstreichen beim Hover/Fokus */
    color: #34495e;               /* leicht dunkler beim Überfahren */
}

/* Dark‑Mode‑Anpassung (falls du Dark‑Mode nutzt) */
@media (prefers-color-scheme: dark) {
    .mailto-link {
        color: #e0e0e0;
    }
    .mailto-link:hover,
    .mailto-link:focus {
        color: #c0c0c0;
    }
}

/* Dark‑Mode (optional) */
@media (prefers-color-scheme: dark) {
  body { background:#121212; color:#e0e0e0; }
  #app { background:#1e1e1e; }
  button { background:#3a3a3a; }
}