:root {
  /* --- Farben --- */
  --accent: #2d85a8;
  /* Helles Stahlblau aus Himmel/Kanten */
  --accent-2: #5aa3c2;
  /* Helleres Blau für Hover */

  --bgTop: #eef2f6;
  /* sehr helles Himmelsgrau */
  --bgBottom: #6fb8dd;
  /* mittleres Himmelblau */

  --card: #f2efe9;
  /* helles Beige */
  --border: #a1a7a7;
  /* neutrales Grau */

  --text: #0c0d0d;
  /* tiefer Textschwarzton */
  --muted: #525a5b;
  /* gedämpftes Graphit */

  --rust-dark: #6b3f33;
  /* dunkler Rostton */
  --rust-mid: #8a4f40;
  /* mittlerer Rostton */
  --rust-light: #b5715b;
  /* heller Rostton */

  /* --- Layout, Abstände, Radius, Schatten --- */
  --baseline: 1.0rem;
  --border-size: 0.15rem;
  --blur: 0.125rem;
  --radius: 0.5rem;
  --shadow: 0.25rem 0.25rem calc(var(--blur) * 5) calc(var(--blur) * 0.5) rgba(0, 0, 0, 0.25);

  /* --- Typografie Skalierung --- */
  --font-scale: 1.25;

  /* --- Schriftgrößen --- */
  --fs-tiny: calc(0.6rem * var(--font-scale));
  --fs-small: calc(0.82rem * var(--font-scale));
  --fs-base: calc(1rem * var(--font-scale));
  --fs-large: calc(1.3rem * var(--font-scale));

  /* --- Schriftstärken --- */
  --fw-thin: 100;
  --fw-xlight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Letterspacing --- */
  --ls-normal: 0em;
  --ls-wide: 0.1em;
  --ls-tight: -0.005em;
}

* {
  box-sizing: border-box;
}

/* Hintergrund */
html {
  min-height: 100%;
  background: linear-gradient(to bottom, var(--bgTop), var(--bgBottom));
  background-attachment: fixed;
  background-repeat: no-repeat;
  scroll-behavior: smooth;  
}

/* Body */
body {
  color: var(--text);
  font-family: var(--font-family);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-normal);
  line-height: calc(var(--baseline) * 2);
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
}

/* Dither */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("img/bg_dither.png") center no-repeat;
  background-size: 100%;
  opacity: 0.1;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: -1;
}


td
{
  vertical-align: top;
}
/* Page */
.page {
  margin: 0 auto;
  max-width: 1040px;
  padding: 0 clamp(0.5rem, 3vw, 2.5rem);
}

/* Hero */
.hero {
  position: relative;
  margin-top: calc(var(--baseline) * 4);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--card);
  
  /* äußerer Shadow wie bei Cards */
  box-shadow: var(--shadow);
}


.aktuelles {
  grid-column: 1 / -1;
  /* nimmt beide Spalten ein */

}

/* Innenkontur sichtbar über dem Bild */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* gleiche Innenkontur wie .card */
  box-shadow: inset 0 0 0 var(--border-size) #ffffff;
}


/* Bild liegt unterhalb, bekommt keine Kontur */
.hero-image {
  height: calc(var(--baseline) * 22.5);
  background-image: url("img/header.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 0;
  box-shadow: none;
}




/* Content bleibt oben drüber */
.hero-content {
  padding: calc(var(--baseline) * 1.5) calc(var(--baseline) * 1.8);
  position: relative;
  /* damit es über dem Bild bleibt */
  z-index: 1;
}

.hero-header {
  margin: 0 0 calc(var(--baseline) * 0.8);
  font-size: calc(var(--fs-large) * 1.2);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);

}

.hero-subline {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  color: var(--muted);
}

/* Layout: Main Grid */
main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--baseline) * 1);
  margin: calc(var(--baseline) * 1) 0 calc(var(--baseline) * 2.5);
}

@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: calc(var(--baseline) * 2) calc(var(--baseline) * 2);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow), inset 0 0 0 var(--border-size) #ffffff;

  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
}

.card+.card {
  margin-top: calc(var(--baseline) * 1);
}

.card-header {
  margin: 0 0 calc(var(--baseline) * 1);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}

/* Small Text */
small {
  font-size: var(--fs-tiny);
  color: var(--muted);
  line-height: var(--baseline)
}

/* Adressen */
.praxis-address {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  white-space: pre-line;
}

/* Öffnungszeiten */
.hours {
  font-size: var(--fs-small);
  width: 100%;
  border-collapse: collapse;
  margin-bottom: calc(var(--baseline) * 1.5);
}

.hours td {
  padding: 0.3rem 0;
}

.hours td:first-child {
  width: 32%;
  color: var(--muted);
}

.hours tr+tr td {
  border-top: 1px dashed var(--border);
}

.hours-note {
  margin: 0;
  font-size: var(--fs-tiny);
  color: var(--muted);
  line-height: calc(var(--baseline) * 1.4);
}

/* Kontakt */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-tight);
}

.contact-list li+li {
  margin-top: 0.35rem;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: text-underline-offset 0.125s ease;
}

a:hover {
  text-underline-offset: 0.35em;
  color: var(--accent-2);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Button */
.tool-link {
  margin-top: calc(var(--baseline) * 2);
  display: inline-block;
  text-align: center;
  background: transparent;
  border: var(--border-size) solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  letter-spacing: var(--ls-wide);
  text-decoration: none;

  transition:
    background-color 0.125s ease,
    border-color 0.125s ease,
    color 0.125s ease;
}

.tool-link:hover,
.tool-link:focus-visible {
  background: color-mix(in srgb, var(--accent-2) 25%, white);
  border-color: color-mix(in srgb, var(--accent-2) 65%, white);
}

/* Impressum */
footer {
  margin: 0 0 calc(var(--baseline) * 3);
  padding-top: calc(var(--baseline) * 1.4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-tiny);
  color: var(--muted);
  line-height: calc(var(--baseline) * 1.4);
}

.impressum-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.impressum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--baseline) * 1.2);
}

.impressum-block {
  white-space: pre-line;
}

@media (max-width: 720px) {
  .impressum-grid {
    grid-template-columns: 1fr;
  }
}

.footer-meta {
  margin-top: calc(var(--baseline) * 0.9);
  font-size: var(--fs-tiny);
  letter-spacing: var(--ls-tight);
}

@media (max-width: 800px) {
  :root {
    --font-scale: 1.25;
    --baseline: 0.9rem;
  }
  main {
    grid-template-columns: 1fr; 
  }

  main > section,
  .card {
    margin-bottom: calc(var(--baseline) * 0.25);
  }
  .hero
  {
     margin-bottom: calc(var(--baseline) * 3);

  }

  .hero-header {
  font-size: calc(var(--fs-large) * 1.0);
 
}

  main > section:last-child,
  main > section > article:last-child {
    margin-bottom: 0;
  }
  body::before {
    background-size: 400%;
    opacity: 0.1;
  }
}