/* ============================================================
   Dirk Schroeder – Digitale Visitenkarte
   Gemeinsames Stylesheet für index.html, wappenbrief.html, impressum.html
   ============================================================ */

:root{
  --ink:#2b2620;
  --ink-soft:#6b6357;
  --paper:#ffffff;
  --frame:#ececec;
  --card:#ffffff;
  --line:#dcdcdc;
  --gold:#9c7a3c;
  --gold-deep:#6e5527;
  --shadow: 0 10px 30px rgba(43,38,32,0.08);
  --radius-lg:18px;
  --radius-md:16px;
  --max-width:560px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  display:flex;
  justify-content:center;
  padding:0 0 60px;
  -webkit-font-smoothing:antialiased;
}

.page{
  width:100%;
  max-width:var(--max-width);
  background:var(--frame);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px 20px 30px;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  height:240px;
  background-image:url('hintergrund_dirk_schroeder_mauer_familienwappen.jpg');
  background-size:cover;
  background-position:85% 18%;
  border-radius:var(--radius-lg);
  border:0px solid var(--paper);
  box-shadow:1 200px 200px rgba(43,38,32,0.18);
  overflow:show;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(236,236,236,0) 45%, rgba(236,236,236,1) 100%);
}
.hero--tall::after{
  background:linear-gradient(180deg, rgba(236,236,236,0) 55%, rgba(236,236,236,1) 100%);
}

/* ---------- IDENTIPIC / TITLEPIC (shared name block) ---------- */
.identipic, .titlepic{
  position:relative;
  padding:0 28px 10px;
  margin-top:-70px;
  border-radius:var(--radius-lg);
  border:0px solid var(--paper);
  box-shadow:1 20px 20px rgba(43,38,32,0.18);
  overflow:show;
}

/* ---------- IDENTITY / TITLEBAR (shared name block) ---------- */
.identity, .titlebar{
  position:relative;
  padding:0 28px 28px;
  margin-top:15px;
}

.crest-mark{
  display:inline-block;
  width:28px;
  height:2px;
  background:var(--gold);
  margin-bottom:10px;
}

h1{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:400;
  font-size:28px;
  letter-spacing:0.5px;
  margin:0 0 4px;
  color:var(--ink);
}

h2{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:400;
  font-size:18px;
  letter-spacing:0.4px;
  margin:0 0 16px;
}

p{
  font-size:15.5px;
  line-height:1.65;
  margin:0 0 12px;
  color:var(--ink);
}
p:last-child{ margin-bottom:0; }

/* ---------- NAV (shared back/section links across pages) ---------- */
.nav-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:8px;
}

.back-link, .nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  color:var(--gold-deep);
  text-decoration:none;
}
.back-link:hover, .nav-link:hover{ text-decoration:underline; }
.back-link svg, .nav-link svg{ width:13px; height:13px; stroke:var(--gold-deep); fill:none; stroke-width:2; }

/* ---------- CARDS ---------- */
.section-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  margin:12px 28px 0;
  padding:15px 15px 15px;
  box-shadow:var(--shadow);
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:20px;
  gap:12px;
  flex-wrap:wrap;
}

.addr-label{
  font-size:12.5px;
  color:var(--ink-soft);
  letter-spacing:0.3px;
  margin-bottom:3px;
}
.addr-value{ font-size:16px; }

a.plain{
  color:var(--gold-deep);
  text-decoration:none;
}
a.plain:hover{ text-decoration:underline; }

.icon{
  width:20px;
  height:20px;
  flex-shrink:0;
  margin-top:2px;
  stroke:var(--gold-deep);
  fill:none;
  stroke-width:1.6;
}

/* ---------- CTA BUTTON ---------- */
.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:12px 28px 0;
  padding:16px 20px;
  background:var(--ink);
  color:var(--paper);
  border:none;
  border-radius:14px;
  font-family:inherit;
  font-size:16px;
  letter-spacing:0.3px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:var(--shadow);
  -webkit-tap-highlight-color:transparent;
}
.cta:hover{ background:var(--gold-deep); }
.cta svg{ width:18px; height:18px; stroke:var(--paper); fill:none; stroke-width:1.8; }

/* ---------- FOOTER (shared, identical nav on every page) ---------- */
footer{
  text-align:center;
  margin-top:34px;
  font-size:12.5px;
  color:var(--ink-soft);
  letter-spacing:0.3px;
  padding:0 16px;
}
footer .foot-links{
  display:inline-flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
footer a{ color:var(--ink-soft); text-decoration:none; }
footer a:hover{ color:var(--gold-deep); text-decoration:underline; }
footer .sep{ color:var(--line); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:400px){
  h1{ font-size:24px; }
  .titlebar, .identity{ padding-left:16px; padding-right:16px; }
  .section-card{ margin-left:16px; margin-right:16px; }
  .cta{ margin-left:16px; margin-right:16px; }
}

@media (min-width:701px){
  :root{ --max-width:620px; }
  .hero{ height:280px; }
}