/* Alexander Forum – styles.css */

:root{
  --af-navy:#0f2a3a;
  --af-navy-600:#1c3c4f;
  --af-ink:#121416;
  --af-muted:#5a6a74;
  --af-bg:#f7f8fa;
  --af-card:#ffffff;
  --af-border:#e6eaee;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--af-bg);
  color:var(--af-ink);
  font-family:"Georgia","Palatino Linotype","Times New Roman",serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{
  max-width:880px;
  margin:0 auto;
  padding:3.5rem 1.25rem;
}

.card{
  background:var(--af-card);
  border:1px solid var(--af-border);
  border-radius:14px;
  padding:2.25rem 2rem;
  box-shadow:0 8px 20px rgba(15,42,58,0.06);
}

.logo{
  display:block;
  margin:0 auto 0.9rem;
  width:450px;        /* Desktop */
  max-width:100%;
  height:auto;
}

h1{
  margin:.25rem 0 0;
  text-align:center;
  font-size:2.1rem;
  letter-spacing:.01em;
  font-weight:700;
  color:var(--af-navy);
}

.tag{
  margin:.25rem 0 2rem;
  text-align:center;
  font-style:italic;
  color:var(--af-muted);
}

.lead{
  font-size:1.125rem;
  color:var(--af-ink);
  margin-bottom:1.125rem;
}

p{ margin:0 0 1rem 0 }
strong{ font-weight:700; color:var(--af-navy) }
em{ font-style:italic }

.contact{
  margin-top:1.5rem;
  display:flex;
  justify-content:center;
}

.btn{
  display:inline-block;
  background:var(--af-navy);
  color:#fff;
  text-decoration:none;
  padding:.7rem 1.2rem;
  border-radius:8px;
  font-weight:600;
  letter-spacing:.02em;
  transition:background .2s ease, transform .06s ease;
  border:1px solid rgba(0,0,0,0.04);
}
.btn:hover{ background:var(--af-navy-600) }
.btn:active{ transform:translateY(1px) }

.foot{
  text-align:center;
  color:var(--af-muted);
  font-size:.95rem;
  margin-top:1.25rem;
  padding:1.25rem .5rem 0;
}

/* === Mobile (≤600px) – einheitlich und schlank === */
@media (max-width:600px){
  .wrap{ padding:2.25rem .9rem }
  .card{ padding:1.6rem 1.1rem }
  .logo{ width:240px }
  h1{ font-size:1.75rem }
  .lead{ font-size:1.05rem }
}

/* === Desktop (≥700px): Blocksatz nur für Fließtext in .card, .tag bleibt zentriert === */
@media (min-width:700px){
  .card p:not(.tag){
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }
}

/* Accessibility */
a:focus, .btn:focus{
  outline:3px solid rgba(15,42,58,.35);
  outline-offset:2px;
}