/* ==========================================================================
   Wellnessurlaub-Tipps.de – Stylesheet
   Farben und Aufbau orientieren sich am bisherigen WordPress-Theme
   "wellnessurlaub". Keine externen Ressourcen (Schriften, Bilder) – alles lokal.
   ========================================================================== */

:root {
  --rosa: #ff7fd4;
  --lila: #b13687;
  --lila-dunkel: #8e2a6c;
  --magenta: #b23688;
  --gruen: #4fa845;          /* etwas dunkler als #6abf60 – besser lesbar */
  --titel: #544236;          /* Überschriften wie im Original */
  --text: #544236;
  --hell: #fbf2f8;
  --linie: #ecd3e4;
  --schrift: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
  --schrift-titel: "MV Boli", Georgia, serif;
}

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

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

body {
  margin: 0;
  background: var(--rosa) url("/assets/img/bg.gif");
  color: var(--text);
  font-family: var(--schrift);
  font-size: 0.875rem;
  line-height: 1.65;
}

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

a { color: var(--text); }
a:hover, a:focus { color: #000; }
:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  color: var(--titel);
  font-weight: bold;
  line-height: 1.3;
  margin: 1.3em 0 0.4em;
}
h1 { font-size: 1.5rem; margin-top: 0.6em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--lila); color: #fff; padding: 0.5em 1em; z-index: 10;
}
.skip-link:focus { left: 0; }

/* ---------- Rahmen ---------- */

#wrap {
  background: #fff;
  max-width: 920px;
  margin: 0 auto;
}

/* ---------- Kopf ---------- */

#header { position: relative; background: #fdfaf5; }

#header .logo { display: block; line-height: 0; }
#header .logo img {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 122;
  object-fit: cover;
  object-position: 40% center;
}

/* Störer "Wellness Angebot" wie im Original – nur auf großen Bildschirmen */
#header .angebot {
  display: none;
  position: absolute;
  right: 8px;
  top: 0;
  pointer-events: none;
}

.hauptmenue { background: var(--lila); border-bottom: 3px solid #e7c5dc; }
.hauptmenue ul {
  list-style: none;
  margin: 0;
  padding: 0.25em 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3em;
}
.hauptmenue a {
  display: inline-block;
  padding: 0.45em 0;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.hauptmenue a:hover, .hauptmenue a:focus, .hauptmenue a[aria-current] { text-decoration: underline; color: #fff; }

@media (max-width: 599px) {
  #header .logo img { aspect-ratio: 3 / 1; }
  .hauptmenue ul { gap: 0 1em; }
  .hauptmenue a { padding: 0.55em 0; }
}

/* Ab 920 px: Kopf, Seitenränder und Fuß exakt wie im alten Theme
   (Hintergrundgrafiken head-bg.jpg, text-bg.gif, fuss-bg.jpg) */
@media (min-width: 920px) {
  #wrap {
    background: #fff url("/assets/img/text-bg.gif") repeat-y center top;
    box-shadow: none;
    margin-bottom: 10px;
  }
  #header {
    height: 168px;
    background: #fff url("/assets/img/head-bg.jpg") no-repeat center top;
  }
  #header .logo { position: absolute; left: 10px; top: 0; width: 740px; height: 122px; }
  #header .logo img { display: none; }
  #header .angebot { display: block; right: 8px; }   /* wie float:right + padding-right:8px im Original */
  .hauptmenue {
    position: absolute;
    left: 0; right: 0; top: 122px;
    height: 28px;
    background: none;
    border: 0;
  }
  .hauptmenue ul { padding: 0 175px 0 25px; gap: 0 1.6em; }
  .hauptmenue a { padding: 0; line-height: 28px; font-size: 12px; }
  #seite { max-width: 810px; margin: 0 auto; }
}

/* ---------- Inhalt + Seitenleiste ---------- */

#seite { display: flex; flex-direction: column; }

#inhalt { padding: 0.5em 16px 2em; min-width: 0; }

#navigation {
  padding: 1em 16px 1.5em;
  background: var(--hell);
  border-top: 3px solid var(--lila);
}

@media (min-width: 760px) {
  #seite { flex-direction: row; align-items: flex-start; }
  #inhalt { flex: 1 1 auto; padding: 0.5em 25px 2em; }
  #navigation {
    flex: 0 0 255px;
    background: none;
    border-top: 0;
    padding: 1.2em 15px 2em 10px;
  }
}

/* ---------- Seitenleiste ---------- */

#navigation { font-size: 12px; line-height: 1.5; }
#navigation h2 { margin: 0.6em 0 0.3em; line-height: 0; }
#navigation h2 img { display: block; }
#navigation h3 {
  font-family: var(--schrift);
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--text);
  margin: 1.2em 0 0.3em;
}
#navigation h3 a { color: var(--magenta); }
#navigation ul { list-style: none; margin: 0; padding: 0; }
#navigation p { margin: 0 0 0.2em; }
#navigation .block { margin-bottom: 0.8em; }

.block-ziele a, .block-reise a { color: var(--magenta); text-decoration: none; }
.block-ziele strong { font-weight: bold; }
.block-guide a { color: var(--gruen); text-decoration: none; }
#navigation a:hover, #navigation a:focus { color: #333; text-decoration: underline; }
#navigation a[aria-current] { font-weight: bold; }

.ziele { display: flex; flex-wrap: wrap; gap: 0 0.4em; margin-bottom: 0.5em !important; }
.ziele a { display: inline-block; padding: 0; }

.icons a { display: flex; align-items: center; gap: 5px; padding: 0.15em 0; }
.icons img { flex: 0 0 auto; }

.info { font-size: 11px; }
.info ul li { padding: 0.15em 0 0.15em 0.9em; position: relative; }
.info ul li::before { content: "›"; position: absolute; left: 0; color: var(--magenta); }
.info a { color: var(--text); }
.alle-themen { margin-top: 1em !important; font-weight: bold; }

@media (max-width: 759px) {
  /* mobil: größere Tippflächen */
  .icons a { padding: 0.45em 0; }
  .ziele a { padding: 0.35em 0; }
  .info ul li { padding: 0.4em 0 0.4em 0.9em; }
  #navigation { font-size: 0.875rem; }
  .info { font-size: 0.8rem; }
}

@media (min-width: 760px) {
  .menue-themen { display: none; }
}

/* ---------- Fuß ---------- */

#footer {
  clear: both;
  padding: 1.2em 16px 1.4em;
  text-align: center;
  font-size: 0.85em;
  border-top: 1px solid var(--linie);
}
#footer p { margin: 0; color: #000; }
#footer a { color: #000; }

/* Ab 920 px: Fuß mit Schatten-Grafik wie im alten Theme */
@media (min-width: 920px) {
  #footer {
    border-top: 0;
    background: #fff url("/assets/img/fuss-bg.jpg") repeat-x center bottom;
    padding: 5px 10px 34px;
    font-size: 12px;
  }
}

/* ---------- Texte ---------- */

#inhalt p, #inhalt li { overflow-wrap: break-word; }
#inhalt h2, #inhalt h3 { clear: both; }
#inhalt::after { content: ""; display: block; clear: both; }

/* Tipp: … (im alten Theme per functions.php erzeugt) */
.tipp {
  font-style: italic;
  background: url("/assets/img/tipp.gif") no-repeat 0 0.1em;
  padding: 0.1em 0 0.3em 48px;
  min-height: 32px;
}

/* Hast du gewusst? */
.gewusst {
  font-style: italic;
  background: url("/assets/img/gewusst.gif") no-repeat 0 0;
  padding: 0.2em 0 0.3em 102px;
  min-height: 52px;
}

.bildnachweis, .linktipps { clear: both; font-size: 0.75rem; color: #7a6a5f; margin-top: 2em; }
.linktipps { font-size: 0.85rem; color: var(--text); }

/* ---------- Bilder im Text (WordPress-Klassen beibehalten) ---------- */

.alignleft { float: left; margin: 0.3em 1.2em 0.5em 0; }
.alignright { float: right; margin: 0.3em 0 0.5em 1.2em; }
.aligncenter { display: block; margin: 1em auto; }
.alignnone { margin: 0.5em 0; }
.zentriert { text-align: center; }

figure { margin: 0.3em 0 0.8em; }
figure.wp-caption { display: table; max-width: 100%; }
figure.wp-caption.alignleft { margin: 0.3em 1.2em 0.5em 0; }
figure.wp-caption.alignright { margin: 0.3em 0 0.5em 1.2em; }
figure.wp-caption img { display: block; }
figcaption {
  display: table-caption;
  caption-side: bottom;
  font-size: 0.7rem;
  line-height: 1.4;
  padding-top: 0.2em;
}

@media (max-width: 480px) {
  /* Große Bilder auf schmalen Displays nicht mehr umfließen lassen */
  img.alignleft, img.alignright { max-width: 45%; }
  figure.alignleft, figure.alignright { max-width: 50%; }
  img.size-full.alignnone, img.aligncenter { width: 100%; }
}

/* ---------- Bausteine ---------- */

.brotkrumen { font-size: 0.8em; margin-top: 0.8em; color: #998a80; }
.brotkrumen a { color: #998a80; }

.teaser { overflow: hidden; padding: 0.3em 0 0.8em; border-bottom: 1px dotted #c9b6a8; }
.teaser h2 { margin: 0.6em 0 0.4em; font-size: 1.05rem; }
.teaser h2 a { color: var(--titel); }
.teaser p { margin: 0; }
.teaser-bild { float: left; margin: 0.25em 1em 0.3em 0; width: 100px; }
.teaser-bild img { display: block; }
.weiterlesen { white-space: nowrap; }

.unterkategorien ul {
  list-style: none;
  margin: 0.8em 0 1em;
  padding: 0.6em 0.9em;
  background: var(--hell);
  border-left: 4px solid var(--lila);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1.2em;
}
.unterkategorien a { color: var(--magenta); font-weight: bold; text-decoration: none; display: inline-block; padding: 0.2em 0; }
.unterkategorien a:hover { text-decoration: underline; }
.unterkategorien span { color: #998a80; font-size: 0.85em; }

.archiv { columns: 2 260px; column-gap: 2em; padding-left: 1.2em; }
.archiv li { break-inside: avoid; padding: 0.15em 0; }

.themen-uebersicht h2 { margin-top: 1.6em; }
.themen-uebersicht h3 { margin-top: 1em; }

.produkt-hinweis {
  clear: both;
  border: 1px solid var(--linie);
  background: var(--hell);
  padding: 0.7em 1em;
  margin: 1.2em 0;
}
.produkt-hinweis a.button {
  display: inline-block;
  padding: 0.45em 1em;
  background: var(--lila);
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
}
.produkt-hinweis a.button:hover { background: var(--lila-dunkel); color: #fff; }
.produkt-hinweis small { display: block; margin-top: 0.5em; color: #888; }

table { border-collapse: collapse; width: 100%; margin: 1em 0; }
td, th { border: 1px solid var(--linie); padding: 0.4em 0.6em; text-align: left; vertical-align: top; }
th { background: var(--hell); }
@media (max-width: 600px) {
  table, tbody, tr, td, th { display: block; width: 100%; }
  tr { margin-bottom: 0.6em; }
}

/* ---------- Druck ---------- */

@media print {
  body { background: #fff; color: #000; }
  #wrap { box-shadow: none; max-width: none; }
  .hauptmenue, #navigation, .skip-link, .brotkrumen, #header .angebot { display: none; }
  a { color: #000; }
}