/* Shared base styles to align subpages with index.html */

/* CSS Variables */
:root {
  --text-heading: #1A1A1A;
  --text-body: #2B2B2B;
  --text-meta: #5A5A5A;
  --text-label: #3D3D3D;
  --bg-primary: #FAFAFA;
  --bg-soft: #F5F5F2;
  --bg-card: #FFFFFF;
  --border: #E8E6E1;
  --divider: #D4D2CD;
  --accent: #2B5EAB;
  --accent-hover: #1E4780;
  --accent-light: #EBF1F9;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 100px;
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(17px, 1.0625rem, 19px);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--text-body);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'tnum' 1;
}

.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; padding: 8px 12px; background: var(--text-heading); color: var(--bg-primary); border-radius: 4px; z-index: 1000; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Containers */
.container-editorial { max-width: 920px; margin: 0 auto; padding: 0 20px; }
.container-structured { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
/* Aliases for legacy subpages */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 920px; margin: 0 auto; padding: 0 20px; }

@media (min-width: 768px) {
  .container-editorial, .container-structured, .container, .container-narrow { padding: 0 40px; }
}
@media (min-width: 1440px) {
  .container-editorial, .container-structured, .container, .container-narrow { padding: 0 60px; }
}
@media (min-width: 2560px) {
  .container-editorial, .container-structured, .container, .container-narrow { padding: 0 80px; }
}

/* Header / Navigation */
header { background: var(--bg-primary); border-bottom: 1.5px solid var(--border); position: sticky; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 20px; position: relative; container-type: inline-size; container-name: header-nav; }
.logo img { height: 90px; width: auto; display: block; }
.nav-content { display: flex; align-items: center; gap: 40px; }
nav ul { display: flex; list-style: none; gap: 40px; }
nav a { text-decoration: none; color: var(--text-body); font-weight: 500; letter-spacing: 0.015em; transition: color 200ms ease; min-height: 44px; display: inline-flex; align-items: center; }
nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

.mobile-menu-btn { display: none; background: none; border: none; padding: 8px; cursor: pointer; width: 40px; height: 40px; min-height: 44px; position: relative; color: var(--text-heading); }

/* Condense before collapse */
@container header-nav (max-width: 920px) { nav ul { gap: 28px; } nav a { letter-spacing: 0; } }
/* Collapse to hamburger based on container width */
@container header-nav (max-width: 740px) {
  /* Keep logo compact when nav collapses */
  .logo img { height: 60px; }

  .nav-content { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-primary); flex-direction: column; padding: var(--space-md); box-shadow: 0 4px 12px rgba(0,0,0,0.1); gap: var(--space-md); border-top: 1.5px solid var(--border); z-index: 1100; }
  .nav-content.active { display: flex; }
  nav ul { flex-direction: column; gap: var(--space-md); width: 100%; }
  .mobile-menu-btn { display: flex; }
}

/* Mobile: match index.html header sizing */
@media (max-width: 768px) {
  .logo img { height: 60px; }
}

/* Footer */
footer { background: var(--bg-primary); color: var(--text-meta); border-top: 1.5px solid var(--border); padding: 30px 0; text-align: center; font-size: 16px; }
.footer-content { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }
.footer-links { display: flex; gap: 12px; justify-content: center; align-items: center; }
/* CSS-only separator - bricht nie um */
.footer-links a:not(:last-child)::after { content: '·'; margin-left: 12px; color: var(--text-meta); pointer-events: none; user-select: none; }
footer a { color: inherit; text-decoration: none; transition: color 0.2s ease; min-height: 44px; display: inline-flex; align-items: center; }
footer a:hover { color: var(--text-heading); text-decoration: underline; }
/* Design Credit dezenter */
.footer-content > p { font-size: 14px; opacity: 0.85; }

/* Mobile: Stack Layout */
@media (max-width: 600px) {
  .footer-content { flex-direction: column; gap: var(--space-sm); }
  .footer-links { flex-direction: column; gap: var(--space-sm); }
  /* Separator auf Mobile ausblenden */
  .footer-links a:not(:last-child)::after { display: none; }
}

/* Minor helpers for profile elements (safe defaults) */
.bio-intro { max-width: 520px; }
.bio-portrait { width: clamp(240px, 26vw, 280px); aspect-ratio: 3/4; }

/* Legal Pages (Impressum, Datenschutz) */
#main {
  max-width: 820px;
  margin: var(--space-2xl) auto var(--space-xl);
  padding: 0 20px;
}

#main h1 {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--text-heading);
  margin-bottom: var(--space-xs);
}

#main > p:first-of-type {
  font-size: 17px;
  color: var(--text-meta);
  margin-bottom: var(--space-xl);
  letter-spacing: 0.01em;
}

#main section {
  margin-bottom: var(--space-xl);
}

#main h2 {
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-heading);
  margin-bottom: var(--space-md);
}

#main h3 {
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text-heading);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

#main p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: var(--space-md);
}

#main p:last-child {
  margin-bottom: 0;
}

#main ul {
  margin: var(--space-md) 0 var(--space-md) var(--space-md);
  padding: 0;
}

#main li {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-body);
  margin-bottom: var(--space-sm);
}

#main a {
  color: var(--accent);
  text-decoration: none;
  transition: color 200ms ease;
}

#main a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#main strong {
  font-weight: 600;
  color: var(--text-heading);
}

#main > p:last-child {
  font-size: 16px;
  color: var(--text-meta);
  margin-top: var(--space-lg);
}

@media (max-width: 768px) {
  #main {
    margin: var(--space-xl) auto var(--space-lg);
  }
  
  #main p, #main li {
    font-size: 17px;
  }
}