/* style.css – Martiversum Orange Theme (based on app.css style) */
:root{
  --brand: #ff7f11;      /* Orange Hauptfarbe */
  --brand-dark: #e56700; /* Dunkleres Orange */
  --panel: #fff4e5;
  --bg: #F5F5DC; /* ALT #F5F5DC; */
  --text: #333;
  --muted: green;
  --border: #ffffff;
  --shadow: 0 4px 8px rgba(0,0,0,0.1);
  /* 👉 sagt dem Browser: bitte NICHT automatisch abdunkeln */
  color-scheme: light;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Quicksand', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

.brand-logo {
  display: block;
  margin: 0 auto;   /* zentriert */
  max-width: 200px; /* passt sich an Bildschirmgröße an */
  width: 80%;
  height: auto;
}


/* Header */
.site-header{
  text-align:center;
padding: clamp(12px,3.5vw,20px) 16px 4px; /* kleinerer unterer Wert */
}
.brand{
  font-family:'Quicksand', sans-serif; font-weight:700;
  font-size: clamp(2rem,6vw,3.4rem); letter-spacing:.5px;
  color: var(--brand-dark);
}
.tagline{ margin-top:8px; color:var(--muted); font-weight:600; }

.container{ max-width:1100px; margin:auto; padding:2px 20px 20px; flex:1; }

/* ========== Welcome Card (optimiert) ========== */
.welcome-card{
  /* Layout & Box */
  background: linear-gradient(180deg, #fff 0%, #f9f9f9 100%);
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: clamp(8px, 2.5vw, 18px) clamp(20px, 4vw, 32px) clamp(20px, 4vw, 32px);
  /* Reihenfolge: top right/left bottom */
  box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,.08));
  text-align: center;
  max-width: 600px;      /* verhindert zu breite Zeilen */
  margin: 0 auto;        /* zentriert die Karte im Flow */

  /* Smooth hover + barriereärmere Focus-States */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  outline: none;
}
.welcome-card:focus-visible{
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--brand, #4a67ff) 25%, transparent),
    0 6px 18px rgba(0,0,0,.12);
}

/* Typografie */
.welcome-card h2{
  font-family: 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2;
  margin-top: .1rem;
  margin-bottom: .75rem;
  color: var(--brand-dark);
}
.welcome-card p{
  font-size: clamp(.95rem, 2.2vw, 1.05rem);
  line-height: 1.7;
  margin: .5rem 0;
  text-align: justify;        /* Blocksatz */
  text-align-last: left;    /* letzte Zeile mittig */
  hyphens: auto;              /* Silbentrennung, falls Browser + lang="de" */
}
.welcome-card em{
  font-style: normal;
  color: var(--brand);
  font-weight: 700;
  letter-spacing: .3px;
}
.welcome-card .ps {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .95em;
  text-align: center !important;  /* <- erzwingt zentriert */
  text-align-last: center !important; /* <- falls Browser das berücksichtigt */
}


/* Innenabstände zwischen Elementen (saubere Vertical Rhythm) */
.welcome-card > * + *{
  margin-top: .5rem;
}


/* Reduced Motion: Animationen herunterfahren */
@media (prefers-reduced-motion: reduce){
  .welcome-card{
    transition: none;
  }
  .welcome-card:hover{
    transform: none;
    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,.08));
  }
}

/* Optionale Variationen
   - .welcome-card--flat  : ohne Schatten/Gradient
   - .welcome-card--left  : linksbündiger Text
*/
.welcome-card--flat{
  background: #fff;
  box-shadow: none;
}
.welcome-card--left{
  text-align: left;
}


/* Links / Portale */
.links{
  margin-top: clamp(20px,3.8vw,36px);
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px,2.6vw,26px);
}
.portal{
  display:grid; place-items:center; text-align:center;
  text-decoration:none; color:var(--text);
}
.card{
  width:240px; height:240px; border-radius:18px;
  background: #f4f4f4;
  display:grid; place-items:center;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.card img{ width:80%; height:80%; object-fit:contain; }
.portal:hover .card{ transform: translateY(-6px); }

.portal-title{
  font-family:'Quicksand', sans-serif; font-weight:700;
  font-size:clamp(1.05rem,2.5vw,1.35rem);
  margin-top:12px; color:var(--brand-dark);
}
.portal-sub{ font-size:.95rem; color:var(--muted); margin-top:4px; }

/* Footer */
.site-footer {
  background: #fff7ef;
  color: #555;
  margin-top: 5px;
  padding: 8px 4px;
  text-align: center;
  border-top: 1px solid #eee;
  font-weight: 300;        /* etwas feiner, aber nicht zu dünn */
  font-size: 0.75rem;      /* kleiner, aber noch gut lesbar */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 0.75;        /* bessere Lesbarkeit */
  letter-spacing: 0.5px;   /* wirkt eleganter */
}

.site-footer a {
  color: var(--brand);       /* Orange */
  text-decoration: none;     /* optional: kein Unterstrich */
}

.site-footer a:hover {
  color: var(--brand-dark);  /* etwas dunkler beim Hover */
  text-decoration: underline; /* optional: eleganter Hover-Effekt */
}

/* Newsletter-Block */
.newsletter {
  max-width: 600px;
  margin: 2rem auto;
  text-align: center;
}
.newsletter-message {
  margin-bottom: 1rem;
  font-weight: 500;
  color: green;
}
.newsletter-text {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--color-text, #333);
}
.newsletter-form {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
.newsletter-form button {
  padding: 0.5rem 1.5rem;
  background: var(--brand, #ff7f11);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.newsletter-form button:hover {
  background: var(--brand-dark, #e56700);
}