/*
 * Styles für kinderarzt-engl.de
 *
 * Ersetzt den früheren Tailwind-Play-CDN (cdn.tailwindcss.com, Tailwind 3.4.17).
 * Der CDN kompilierte das CSS bei jedem Seitenaufruf im Browser und übertrug dabei
 * die Besucher-IP an einen Drittanbieter — beides ist für diese Seite unnötig.
 *
 * Enthalten sind ausschließlich die Utility-Klassen, die in index.html,
 * impressum.html und datenschutzerklaerung.html tatsächlich vorkommen. Die Werte
 * entsprechen exakt Tailwind 3.4.17; die Regelreihenfolge ist ebenfalls von dort
 * übernommen, damit sich Specificity-Gleichstände genauso auflösen.
 *
 * WICHTIG: Wer im Markup eine neue Tailwind-Klasse verwendet, muss sie hier von
 * Hand ergänzen — es gibt keinen Build-Schritt, der das automatisch tut.
 */

/* ---------------------------------------------------------------- Preflight */
/* Auszug aus Tailwinds Reset, reduziert auf die hier verwendeten Elemente. */

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

blockquote,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p {
  margin: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

img,
svg,
video {
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- Utilities */

/*
 * Die max-width-Staffelung von .container steht bewusst HIER und nicht unten bei
 * den übrigen Breakpoints: .max-w-4xl / .max-w-5xl haben dieselbe Specificity und
 * müssen .container überstimmen können. Das entscheidet allein die Reihenfolge.
 */
.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.right-0 {
  right: 0px;
}

.top-0 {
  top: 0px;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-8 {
  margin-top: 2rem;
}

.flex {
  display: flex;
}

.h-16 {
  height: 4rem;
}

.h-auto {
  height: auto;
}

.w-32 {
  width: 8rem;
}

.w-auto {
  width: auto;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.list-disc {
  list-style-type: disc;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

/* Tailwinds space-*-Selektor bewusst originalgetreu: er überspringt [hidden]. */
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 1rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.25rem;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem;
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem;
}

.overflow-hidden {
  overflow: hidden;
}

.break-all {
  word-break: break-all;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-sky-100 {
  border-color: #e0f2fe;
}

.border-slate-100 {
  border-color: #f1f5f9;
}

.border-slate-200 {
  border-color: #e2e8f0;
}

.bg-sky-500 {
  background-color: #0ea5e9;
}

.bg-slate-50 {
  background-color: #f8fafc;
}

.bg-white {
  background-color: #ffffff;
}

.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-center {
  text-align: center;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

.leading-relaxed {
  line-height: 1.625;
}

.text-sky-500 {
  color: #0ea5e9;
}

.text-sky-600 {
  color: #0284c7;
}

.text-sky-700 {
  color: #0369a1;
}

.text-slate-300 {
  color: #cbd5e1;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-600 {
  color: #475569;
}

.text-slate-700 {
  color: #334155;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-900 {
  color: #0f172a;
}

.text-white {
  color: #ffffff;
}

.underline {
  text-decoration-line: underline;
}

.decoration-sky-300 {
  text-decoration-color: #7dd3fc;
}

.opacity-10 {
  opacity: 0.1;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.hover\:text-sky-100:hover {
  color: #e0f2fe;
}

.hover\:text-sky-600:hover {
  color: #0284c7;
}

.hover\:text-sky-700:hover {
  color: #0369a1;
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

/* ------------------------------------------------------- Eigene Komponenten */

/* Punktraster-Hintergrund der Startseite (vorher <style> in index.html). */
.bg-pattern {
  background-color: #f8fafc;
  background-image: radial-gradient(#bae6fd 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

/*
 * Absatzabstände für die Fließtextseiten.
 * Das Markup trägt "prose prose-slate" aus Tailwinds Typography-Plugin. Der
 * Play-CDN hat dieses Plugin ohne "?plugins=typography" nie geladen, die Klassen
 * waren also wirkungslos — zusammen mit "p { margin: 0 }" aus dem Preflight
 * klebten die Absätze der Datenschutzerklärung aneinander. Diese Regeln stellen
 * lesbare Abstände her.
 */
.prose p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.prose > :first-child {
  margin-top: 0;
}

/* ------------------------------------------------- Responsive (Breakpoints) */

@media (min-width: 768px) {
  .md\:h-20 {
    height: 5rem;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}