/* =========================================================
   Praxis für Ergotherapie · Gabriele Ascheid · Ailertchen
   Statisches Layout nach dem bisherigen Joomla/YAML-Design
   ========================================================= */

:root {
  --sand:        #f1d083;   /* Seitenhintergrund (Original) */
  --white:       #ffffff;
  --text:        #1a1a1a;
  --orange:      #ee7e02;   /* Deko: Linien, Rahmen */
  --orange-text: #a85400;   /* Orange als Schrift – Kontrast ≥ 4.5:1 */
  --green:       #9aba86;   /* Footer (Original) */
  --green-text:  #4a7a3d;   /* Grün als Schrift – Kontrast ≥ 4.5:1 */
  --muted:       #595959;

  --page-max: 72rem;        /* ≈ 1150 px – breit genug für einzeilige Fußzeile */
  --nav-w:    12rem;
  --gutter:   clamp(1rem, 3vw, 1.25rem);

  --fs-base: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  --lh:      1.55;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sand);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh);
}

img { max-width: 100%; height: auto; }

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--text);
  color: var(--white);
  font-weight: bold;
  text-decoration: none;
  border-radius: 0 0 .25rem .25rem;
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Fokus ---------- */
:focus-visible {
  outline: 3px solid var(--orange-text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Seitenrahmen ---------- */
.page {
  max-width: var(--page-max);
  margin: clamp(0rem, 3vw, 1.5rem) auto;
  background: var(--white);
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  padding: .85rem var(--gutter) 1.5rem;
}

.topnav {
  display: flex;
  justify-content: flex-end;
  font-size: .9375em;
}
.topnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .4em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topnav li + li::before {
  content: "|";
  margin-inline-end: .4em;
  color: var(--green-text);
  speak: never;
}
.topnav a {
  color: var(--green-text);
  text-decoration: none;
}
.topnav a:hover,
.topnav a[aria-current="page"] { text-decoration: underline; }

.logo {
  display: block;
  width: min(100%, 35.25rem);       /* 564 px */
  margin: .4rem auto 0;
  /* das Original sitzt leicht rechts der Mitte */
  transform: translateX(clamp(0rem, 4vw, 3.4rem));
}
.logo img { display: block; width: 100%; }

/* ---------- Hauptbereich ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 44rem) 1fr;
  gap: 0 1.25rem;
  padding: .6rem var(--gutter) 1.5rem;
}

/* Vertikale Navigation mit gepunkteter Linie */
.mainnav {
  align-self: start;
  border-inline-end: 2px dotted var(--orange);
}
.mainnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mainnav a {
  display: block;
  padding: .2rem 0 .2rem 1.25rem;
  color: var(--text);
  font-weight: bold;
  text-decoration: none;
}
.mainnav a:hover { color: var(--orange-text); text-decoration: underline; }
.mainnav a[aria-current="page"] { color: var(--orange-text); }

main { min-width: 0; }

/* ---------- Typografie im Inhalt ---------- */
main h1 {
  margin: 0 0 .6em;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem);
  line-height: 1.15;
}
main h2 {
  margin: 1.6em 0 .5em;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem);
  line-height: 1.2;
}
main h3 {
  margin: 1.2em 0 .4em;
  font-size: 1.05em;
}
main p, main ul { margin: 0 0 1em; }
main ul { padding-inline-start: 1.25em; }
main li { margin-bottom: .15em; }

main a {
  color: var(--orange-text);
  text-decoration: underline;
  text-underline-offset: .15em;
  overflow-wrap: anywhere;
}
main a:hover { text-decoration-thickness: 2px; }

.lead { margin-top: 0; }
.note { color: var(--muted); font-size: .9375em; }

.signature { margin-top: 1.5em; }
.signature em { font-style: italic; }

.file::after {
  content: " (PDF)";
  font-size: .85em;
}

/* Bilder im Fließtext */
figure { margin: 0 0 1em; }
.img-right,
.img-left {
  display: block;
  margin-bottom: 1em;
}
.img-right { float: right; margin-inline-start: 1rem; }
.img-left  { float: left;  margin-inline-end: 1.25rem; }
.img-center { display: block; margin: 0 auto 1em; }

.clear { clear: both; }

.portrait { max-width: 16.7rem; }

/* Linkliste */
.linklist { list-style: none; padding: 0; }
.linklist > li {
  padding: 1em 0;
  border-bottom: 1px dotted var(--orange);
}
.linklist > li:last-child { border-bottom: 0; }
.linklist img { display: block; margin-top: .75em; }

/* Presse-Einträge */
.press-item {
  padding-bottom: 1.25em;
  margin-bottom: 1.25em;
  border-bottom: 1px dotted var(--orange);
}
.press-item:last-child { border-bottom: 0; }
.press-item::after { content: ""; display: table; clear: both; }

/* Archiv */
.archive {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 2px dotted var(--orange);
}

/* Adresse */
address { font-style: normal; margin-bottom: 1em; }

/* Rechtstexte */
.legal h2 { font-size: 1.25rem; }
.legal h3 { margin-top: 1.4em; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 2.4rem var(--gutter) 1.4rem;
  background: var(--green) url("../images/footer.jpg") center top / 100% auto no-repeat;
  color: #000;
  font-size: .875em;
}
.site-footer p { margin: 0; }
.site-footer .sep { padding: 0 .3em; }
.site-footer span { white-space: nowrap; }   /* bricht nur zwischen den Angaben um */
.site-footer a { color: #000; }

/* ---------- Responsiv ---------- */
@media (max-width: 52rem) {
  .layout {
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .logo { transform: none; }

  .layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .mainnav {
    border-inline-end: 0;
    border-bottom: 2px dotted var(--orange);
    padding-bottom: .6rem;
  }
  .mainnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1.1rem;
  }
  .mainnav a {
    padding: .45rem 0;          /* Touch-Ziel ≥ 24 px */
  }

  .img-right, .img-left {
    float: none;
    margin-inline: auto;
  }

  .site-footer .sep { display: none; }
  .site-footer span { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Windows-Kontrastmodus */
@media (forced-colors: active) {
  .mainnav a[aria-current="page"] { text-decoration: underline; }
}

/* ---------- Druck ---------- */
@media print {
  body { background: #fff; font-size: 11pt; }
  .page { margin: 0; max-width: none; }
  .skip-link, .topnav, .mainnav { display: none; }
  .layout { display: block; padding: 0; }
  .site-footer { background: none; border-top: 1px solid #000; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}