/* Oeffentliche Portalseite (m7.3a2) - gemeinsame Stile fuer die Vorschau
   im Backoffice und die Referenzdarstellung fuer WordPress
   (tools/portal-referenz.mjs bettet genau diese Datei ein).

   Alles ist unter .tp-seite eingehaengt, damit weder das Backoffice noch
   ein WordPress-Theme von aussen hineinwirkt oder umgekehrt. Farben und
   Schriften stehen als Variablen an .tp-seite und lassen sich im Theme
   ueberschreiben. Zwei Stile:
     .tp-seite--sachlich    Faktenkasten frueh, kompakt, klare Ueberschriften
                            (Referenz "Treffpunkt Gardasee")
     .tp-seite--erzaehlend  grosses Titelbild, erzaehlende Typografie,
                            Abschnittsbilder, Fakten am Ende
                            (Referenz "Gardasee MyLove") */

.tp-seite {
  --tp-text: #201E1A;
  --tp-leise: #6B645B;
  --tp-linie: #E6E1D8;
  --tp-flaeche: #FBFAF7;
  --tp-akzent: #6B7A4B;
  --tp-akzent-hell: #EDF0E4;
  --tp-warm: #B3543A;
  --tp-warm-hell: #F8EDE8;
  --tp-warnung: #9B3B2C;
  --tp-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --tp-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --tp-radius: 8px;

  display: flex; flex-direction: column; gap: 22px;
  max-width: 820px; margin: 0 auto; min-width: 0;
  color: var(--tp-text); font-family: var(--tp-sans); font-size: 15px; line-height: 1.6;
  overflow-wrap: break-word;
}
.tp-seite *, .tp-seite *::before, .tp-seite *::after { box-sizing: border-box; }
.tp-seite p, .tp-seite h1, .tp-seite h2, .tp-seite h3, .tp-seite ul, .tp-seite dl,
.tp-seite dd, .tp-seite figure { margin: 0; }
.tp-seite ul { padding: 0; }

.tp-baustein { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tp-titel { font-size: 17px; line-height: 1.3; font-weight: 650; }
.tp-untertitel, .tp-abschnitt-titel { font-size: 15.5px; line-height: 1.35; font-weight: 650; }
.tp-absatz { line-height: 1.65; }
.tp-leise { color: var(--tp-leise); font-size: 13.5px; }
.tp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.tp-liste { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.tp-liste > li { position: relative; padding-left: 16px; }
.tp-liste > li::before {
  content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--tp-akzent);
}
.tp-liste--spalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 16px; }
.tp-paare { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 16px; }
.tp-paare dt { color: var(--tp-leise); }
.tp-cin-offen { color: var(--tp-warnung); font-weight: 600; }

/* Bilder */
.tp-bild { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tp-bild img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: var(--tp-radius); background: var(--tp-flaeche); object-fit: cover;
}
.tp-bildnachweis { font-size: 11.5px; color: var(--tp-leise); }
.tp-galerie { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tp-galerie img { aspect-ratio: 4 / 3; }

/* Kopf */
.tp-kopf { display: flex; flex-direction: column; gap: 4px; }
.tp-h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tp-unterzeile { font-size: 16px; font-weight: 600; }
.tp-ort { color: var(--tp-leise); }
.tp-teaser { font-size: 17px; line-height: 1.55; }

/* Abschnitte */
.tp-abschnitt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tp-abschnitt + .tp-abschnitt { padding-top: 12px; border-top: 1px solid var(--tp-linie); }
.tp-abschnitt-bild img { max-height: 420px; }

/* Speisekarte, Produkte */
.tp-menue { display: flex; flex-direction: column; gap: 10px; }
.tp-karte-kopf { font-weight: 650; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--tp-leise); }
.tp-karte { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tp-karte-eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; }
.tp-karte-name { font-weight: 600; }
.tp-karte-preis { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-karte-text { grid-column: 1 / -1; color: var(--tp-leise); font-size: 13.5px; }
.tp-produkt { display: flex; flex-wrap: wrap; gap: 0 6px; }

/* Anfrage */
.tp-anfrage-text { font-weight: 600; }
.tp-link { color: var(--tp-akzent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Rueckfall */
.tp-rueckfall {
  padding: 10px 14px; border-radius: var(--tp-radius);
  border: 1px solid var(--tp-warm); background: var(--tp-warm-hell);
  font-size: 14px; font-weight: 550;
}

/* Faktenkasten */
.tp-fakten {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--tp-linie); border-radius: var(--tp-radius);
  background: var(--tp-flaeche);
}

/* ---- sachlich ------------------------------------------------------ */
.tp-seite--sachlich .tp-titelbild img { max-height: 320px; aspect-ratio: 16 / 9; }
.tp-seite--sachlich .tp-titel {
  font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tp-akzent);
}
.tp-seite--sachlich .tp-fakten { border-left: 3px solid var(--tp-akzent); }
@media (min-width: 640px) {
  .tp-seite--sachlich .tp-fakten:not(.tp-fakten--ende) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px;
  }
}

/* ---- erzaehlend ---------------------------------------------------- */
.tp-seite--erzaehlend { gap: 28px; }
.tp-seite--erzaehlend .tp-baustein--kopf { gap: 16px; }
.tp-titelbild--gross img { aspect-ratio: 3 / 2; max-height: 520px; border-radius: 12px; }
.tp-seite--erzaehlend .tp-h1 { font-family: var(--tp-serif); font-size: 34px; font-weight: 600; line-height: 1.15; }
.tp-seite--erzaehlend .tp-unterzeile { font-weight: 400; color: var(--tp-leise); }
.tp-seite--erzaehlend .tp-teaser {
  font-family: var(--tp-serif); font-size: 20px; font-style: italic; line-height: 1.5;
  padding-left: 16px; border-left: 3px solid var(--tp-warm);
}
.tp-seite--erzaehlend .tp-absatz { font-family: var(--tp-serif); font-size: 17px; line-height: 1.75; }
.tp-seite--erzaehlend .tp-titel {
  font-family: var(--tp-serif); font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tp-warm);
}
.tp-seite--erzaehlend .tp-abschnitt-titel { font-family: var(--tp-serif); font-size: 22px; font-weight: 600; }
.tp-seite--erzaehlend .tp-abschnitt + .tp-abschnitt { border-top: 0; padding-top: 6px; }
.tp-seite--erzaehlend .tp-galerie { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tp-seite--erzaehlend .tp-fakten--ende { font-size: 14px; }
.tp-seite--erzaehlend .tp-fakten--ende .tp-titel { font-family: var(--tp-sans); color: var(--tp-leise); letter-spacing: .07em; }
.tp-seite--erzaehlend .tp-fakten--ende .tp-absatz { font-family: var(--tp-sans); font-size: 14px; }

@media (max-width: 479px) {
  .tp-seite { font-size: 14.5px; gap: 18px; }
  .tp-h1 { font-size: 22px; }
  .tp-seite--erzaehlend .tp-h1 { font-size: 26px; }
  .tp-seite--erzaehlend .tp-teaser { font-size: 17px; }
  .tp-galerie, .tp-seite--erzaehlend .tp-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-paare { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tp-paare dd { margin-bottom: 6px; }
}