/* Basis */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", "Carlito", sans-serif;
}

body {
  background-color: #000000;
  color: #ffffff;
  line-height: 1.6;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Layout-Container */
.container {
  position: absolute;
  width: 100vw;        /*1920px 1080px*/  
  height: 100vmin;        /* wichtig für sauberes Skalieren */
  padding: 20px;
  text-align: center;
  color: #ffffff;
  background: #000000;      
  display: flex;
  flex-direction: column;
  align-items: center;     /* <- horizontal mittig */
  justify-content: flex-start;
  gap: 48px;               /* Abstand zwischen Titel und Box */
  padding: 60px 20px 20px; /* etwas Luft oben */
}

.logo {
  position: absolute;
  top: 2vmin;       /* Abstand von oben */
  right: 1vmin;     /* Abstand von rechts */
  width: 10vmin;    /* Logo skalierend zur Viewport-Höhe/Breite */
  height: auto;
  z-index: 10;
}

/* Überschrift (global) – wird für den Header weiter unten gezielt überschrieben */
h1 {
  color: #ffffff;
  font-size: 6vmin;
  font-weight: bold;
}

h2 {
  color: #1778C8;
  font-size: 3.6vmin;
}

p {
  color: #ffffff;
  font-size: 2.4vmin
}

/* Kartenbereich */
.birthday-display {
  background-color: rgb(70, 69, 69);
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;    
  margin-bottom: 10px; 
  width: auto;
}

.birthday-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1vw;
}

.birthday-card {
  background-color: #000000;
  border-left: 0.5vmin solid #1778C8;
  border-radius: 1vmin;
  padding: 2vmin;
  width: 25vw;
  height: 45vmin;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.birthday-card h2 {
  color: #1778C8;
  font-size: 3.6vmin;
  margin-bottom: 1vmin;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.birthday-card p {
  color: #ffffff;
  font-size: 2.2vmin;
}

.birthday-card .age {
  font-size: 2vmin;
  font-weight: bold;
  color: #ffffff;
  margin-top: 1vmin;
}

.birthday-card .birthday-message {
  font-style: italic;
  color: #1778C8;
  font-size: 2vmin;  /* skaliert flüssig mit Bildschirm */
  margin-top: 2vmin;
  padding: 1.2vmin;
  background-color: rgb(31, 31, 31);
  border-radius: 1vmin;
  width: 100%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}


/* Fallback-Box (wenn niemand Geburtstag hat) */
.company-message {
  background-color: #000000;
  border-left: 0.5vmin solid #1778C8;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  width: 61vmin;
  height: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.company-message h2 {
  color: #1778C8;
  margin-bottom: 20px;
  font-size: 3.6vmin;
}

.company-message p { 
  color: #ffffff;
  font-size: 2.4vmin;
  line-height: 1.6;
}

/* Sonstige Größen */
.birthday-icon { width: 80px; height: 80px; }
.birthday-emoji { 
  font-size: 5vmin; 
}

.page-header{
  justify-content:center;
  margin-top: 9vmin;
  margin-bottom: 9vmin;
  display:inline-grid;
  grid-auto-flow: column;
  grid-template-columns: auto 1fr auto;  /* links Icon – Text – rechts Icon */
  align-items:center;                     /* verti kal sauber mittig */
  gap:.6em;                            
}

.page-header h1{
  font-size: 8vmin;                         /* Gesamtgröße hier steuern */
  font-weight: bold;
  line-height:1;
  display: inline-block;
  margin:0;                               /* Standard-Margins weg */
}
img {
  width: 2em;
  height: 2em;
}

.page-header h1 img{
  width:2em;
  height:2em;
  vertical-align:-35px;
  animation: float 3s ease-in-out infinite;
  display:inline-block;
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(10px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}