@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  background-color: white;
}

/* ================================
   Header
   ================================ */
.ql-container, .ql-toolbar, .ql-editor {
  z-index: 1 !important;
  position: relative;
}

.ql-tooltip {
  top: -45px !important;
  left: 0 !important;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 20rem;
  background-image: linear-gradient(-5.71deg, white 50%, transparent 50%),
                    url("../images/background/bg.JPG");
  background-repeat: no-repeat, no-repeat;
  background-position: center 100%, center center;
  background-size: 100vw 10vw, cover;
  color: white;
}

@media (orientation: portrait) {
  .header { min-height: 12rem; }
}

/* Landscape auf Handy (mittlere Höhe 401–500px): Basis-Header kleiner */
@media (orientation: landscape) and (max-height: 500px) and (min-height: 401px) {
  .header { min-height: 11rem; position: relative; }
}

/* Landscape auf Handy (flache Höhe ≤400px): sehr kompakter Header */
@media (orientation: landscape) and (max-height: 400px) {
  .header { min-height: 7rem; position: relative; }
}

.header h1 {
  color: white;
  font-size: 3rem;
  margin-top: 4rem;
}

@media (max-height: 400px) {
  .header h1 { margin-top: 1rem; }
}

.header__nav {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}

.header__nav a {
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
}

/* ================================
   Container
   ================================ */
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-size: 1.2rem;
  color: black;
  margin-top: 0vh;
}

.container h1 { font-size: 2rem; }

@media (max-width: 1200px) {
  .container h1 { font-size: 1.6rem; }
}

@media (max-width: 900px) {
  .container h1 { font-size: 1.15rem; }
}

.container a {
  text-decoration: none;
  color: brown;
  font-size: 1.4rem;
}

@media (orientation: portrait) {
  /* 1.4vh wäre auf 700px-Handy nur ~10px – fester rem-Wert ist sicherer */
  .container a { font-size: 1.4rem; }
  .eintrag-text { font-size: 1.1rem; }
}

/* ================================
   Navigation Bar
   ================================ */
.nav-bar {
  display: flex;
  justify-content: center;
  padding: 1rem 2rem;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

.nav-bar--end { justify-content: center; }

.nav-bar__rechts {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.reise-datum {
  color: darkslategrey;
  text-align: center;
}
.reise-datum-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
  color: darkslategrey;
}

.headerbild-form {
  margin: 1rem 0;
  width: 90vw;
  max-width: 700px;
}

.headerbild-form__label {
  display: block;
  font-size: 1.2rem;
  color: darkslategrey;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.headerbild-form__zeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.headerbild-form__vorschau {
  width: 160px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* ================================
   Buttons
   ================================ */
.btn {
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.3rem 0.8rem;
  border: none;
  font-family: inherit;
}

.btn--edit {
  background: none;
  border: 1px solid #555;
  color: #555;
}

.btn--delete {
  background: none;
  border: 1px solid #cc0000;
  color: #cc0000;
}

.btn--save {
  background: #2e7d32;
  color: white;
  padding: 0.4rem 1.2rem;
  font-size: 1.1rem;
}

.btn--primary {
  background: #444;
  color: white;
  font-size: 1.1rem;
  padding: 0.6rem;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn--spellcheck {
  background: #1565c0;
  color: white;
  align-self: flex-start;
  margin-top: 0.5rem;
}

.btn--slideshow {
  background: #444;
  color: white;
  border-radius: 20px;
  padding: 0.4rem 1.2rem;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ================================
   Formulare
   ================================ */
.new-entry {
  display: flex;
  width: 90%;
  flex-direction: column;
  align-items: center;
  margin: 1rem;
}

.form--überschrift {
  display: flex;
  flex: 1 1 0px;
  justify-content: center;
  margin: 2rem;
  font-size: 2rem;
}

.form--titel {
  display: flex;
  flex: 1 1 0px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 1rem;
}

.form--titel--spalte {
  flex-direction: column;
  width: 90vw;
  align-items: flex-start;
  justify-content: flex-start;
}

#blogtext { width: 90%; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-label {
  font-size: 1rem;
  color: darkslategrey;
}

.form-input {
  font-size: 1.1rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

.datum-fehler {
  color: #cc0000;
  font-size: 1rem;
  display: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
}

.verwendung-liste {
  margin-top: 1rem;
  width: 100%;
}

.verwendung-zeile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}

.verwendung-dateiname {
  min-width: 200px;
  font-size: 1.1rem;
}

.datum-zeile {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.datum-zeile__feld {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ================================
   Meldungen
   ================================ */
.msg-fehler {
  color: #cc0000;
  background: #fff0f0;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.msg-erfolg {
  color: #2e7d32;
  background: #f0fff0;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* ================================
   Admin – Benutzer anlegen
   ================================ */
.admin-form-zeile {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  align-items: flex-end;
}

.admin-form-feld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 0;
  min-width: 0;
}

.admin-form-feld--klein {
  flex: 0 0 140px;
}

.admin-form-feld--submit {
  flex: 0 0 auto;
}

.admin-form-feld label {
  font-size: 1.1rem;
  color: #444;
}

.admin-form-feld input[type="text"],
.admin-form-feld input[type="password"],
.admin-form-feld select {
  padding: 0.5rem 0.7rem;
  font-size: 1.2rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.admin-form-feld input[type="submit"] {
  padding: 0.5rem 1.2rem;
  font-size: 1.2rem;
  background: #4a7c59;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.admin-form-feld input[type="submit"]:hover {
  background: #3a6347;
}

/* ================================
   Karten (Cards)
   ================================ */
.karte {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.08);
}

.karte--blog {
  width: 100%;
  cursor: pointer;
  transition: transform 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.karte--blog:hover { transform: scale(1.03); }

.karte__bild-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.karte__bild {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.karte__placeholder {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.karte__bild-zaehler {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 0.95rem;
  padding: 2px 8px;
  border-radius: 12px;
}

.karte__body { padding: 0.8rem 1rem; text-align: center; }

.karte__datum {
  font-size: 0.95rem;
  color: darkslategrey;
  margin-bottom: 0.3rem;
}

.karte__titel {
  font-size: 1.15rem;
  font-weight: bold;
  color: #333;
}

/* Reise-Kacheln (overview + backend) */
.karte--reise {
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
  scroll-margin-top: 6rem;
}

.karte--reise:hover { transform: scale(1.03); }

.karte__reise-bild-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.karte__reise-bild {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.karte__reise-placeholder {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.karte__reise-kopf {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 1rem;
  color: white;
}

.karte__reise-kopf a {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
}

.karte__reise-kopf p {
  font-size: 0.95rem;
  margin-top: 0.3rem;
  opacity: 0.85;
}

.karte__reise-body {
  padding: 1rem;
  flex: 1;
  text-align: center;
}

.karte__reise-body h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.karte__reise-body p {
  font-size: 1.1rem;
  color: darkslategrey;
}

.karte__reise-datum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 1rem;
}

.karte__reise-datum-trenner {
  color: #aaa;
}

.karte__reise-footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.reise-karte__bearbeiten {
  flex: 1;
  text-align: center;
  padding: 0.3rem;
  border: 1px solid #555;
  border-radius: 4px;
  color: #555;
  font-size: 0.95rem;
  text-decoration: none;
}

/* ================================
   Karten-Grid
   ================================ */
.karten-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  padding: 2rem;
  width: 90%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.karten-grid .karte--blog {
  margin: 1rem;
  flex: 0 0 calc(25% - 2rem);
  max-width: calc(25% - 2rem);
  width: auto;
}

.reisen-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  padding: 2rem;
  width: 90%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.reisen-grid > a {
  margin: 1rem;
  flex: 0 0 calc(25% - 2rem);
  max-width: calc(25% - 2rem);
}

@media (max-width: 1200px) {
  .reisen-grid > a { flex: 0 0 calc(33.333% - 2rem); max-width: calc(33.333% - 2rem); }
}

@media (max-width: 900px) {
  .reisen-grid > a { flex: 0 0 calc(50% - 2rem); max-width: calc(50% - 2rem); }
}

@media (max-width: 600px) {
  .reisen-grid > a { flex: 0 0 100%; max-width: 100%; margin: 0 0 1.5rem; }
  .header h1 { font-size: 2rem; }
}

.reisen-grid--backend {
  gap: 1.5rem;
  padding: 0 2rem;
}

/* ================================
   Galerie
   ================================ */
.galerie-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1rem 0 1.5rem;
  flex-wrap: wrap;
}

.galerie-header h2 { color: darkslategrey; }

.galerie-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  padding: 0 2rem 3rem;
}

.galerie-thumbnail-wrapper { position: relative; }

.galerie-thumbnail {
  width: 220px;
  height: 148px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
}

.galerie-upload-form {
  margin: 0.5rem 0 1.5rem 0;
}

.galerie-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: #4a7c59;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.3rem;
  transition: background 0.2s;
}

.galerie-upload-label:hover {
  background: #3a6347;
}

.galerie-upload-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.galerie-upload-datei {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  font-size: 1.1rem;
}

.galerie-leer {
  margin: 2rem;
  color: darkslategrey;
  font-size: 1.3rem;
}

.gps-link {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: white;
  border-radius: 50%;
  padding: 3px;
  font-size: 1rem;
  text-decoration: none;
}

.galerie-thumbnail-datum {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 0.7rem;
  text-align: center;
  padding: 3px 4px;
  pointer-events: none;
}

.overlay__datum {
  font-size: 0.85rem;
  color: #ddd;
  white-space: nowrap;
}

.overlay__gps {
  font-size: 1.4rem;
  text-decoration: none;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  padding: 4px 6px;
  line-height: 1;
}

.overlay__karte {
  width: 260px;
  height: 230px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.overlay__karte__iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.overlay__karte__close {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.eintrag-karte {
  width: 100%;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 0.6rem;
}

.eintrag-karte__iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ================================
   Karten-Overlay
   ================================ */
.karten-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.karten-overlay__box {
  position: relative;
  width: 80vw;
  height: 75vh;
  max-width: 1000px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.karten-overlay__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.karten-overlay__gmaps {
  padding: 8px 14px;
  font-size: 0.95rem;
  color: #1a73e8;
  text-decoration: none;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.karten-overlay__gmaps:hover {
  text-decoration: underline;
}

.karten-overlay__iframe {
  flex: 1;
  width: 100%;
  border: none;
}

@media (max-width: 600px) {
  .karten-overlay__box {
    width: 96vw;
    height: 80vh;
  }
}

/* ================================
   Eintrag-Seite
   ================================ */
.eintrag-meta {
  color: darkslategrey;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
  font-size: 1.3rem;
}

.eintrag-ueberschrift {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1.6rem;
}

.eintrag-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0 3vw;
  width: 88%;
  max-width: 1400px;
  box-sizing: border-box;
}

.eintrag-bild-container {
  position: relative;
  flex-shrink: 0;
  width: 420px;
  max-width: 90vw;
  height: 280px;
  overflow: hidden;
  border-radius: 6px;
  margin-top: 2.5rem;
}

.eintrag-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

.eintrag-bild-zaehler {
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 1rem;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  pointer-events: auto;
}

.eintrag-bild-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  pointer-events: none;
}

.eintrag-gps {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
}

.eintrag-text {
  flex: 1 1 280px;
  min-width: 0;
  font-size: 1.3rem;
  line-height: 1.9;
  color: #333;
}

.eintrag-text a {
  /* inherit wird weiter unten im File gesetzt – nach allen breakpoint-spezifischen .container a-Regeln */
}

.eintrag-videos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
  padding: 0 3vw;
}

.eintrag-video {
  width: 640px;
  max-width: 100%;
  border: 2px solid #ccc;
  border-radius: 6px;
  background: #000;
}

/* ================================
   Eintrag – nur Text scrollt (Desktop)
   ================================ */
body.eintrag-page {
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

body.eintrag-page .container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.eintrag-page .eintrag-layout {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  align-items: stretch;
  flex-wrap: nowrap;
}

body.eintrag-page .eintrag-bild-container {
  flex-shrink: 0;
}

body.eintrag-page .eintrag-text-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 0.5rem;
}

/* Auf Mobilgeräten (gestapeltes Layout) wieder normal scrollen */
@media (max-width: 900px) {
  body.eintrag-page {
    overflow: auto;
    height: auto;
    display: block;
  }
  body.eintrag-page .container {
    overflow: visible;
    display: block;
    height: auto;
  }
  body.eintrag-page .eintrag-layout {
    flex-wrap: wrap;
    overflow: visible;
    height: auto;
  }
  body.eintrag-page .eintrag-text-scroll {
    overflow: visible;
    height: auto;
  }
}

/* ================================
   Vollbild-Overlay
   ================================ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.92);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.overlay__img {
  max-width: 88vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

.overlay__btn {
  position: absolute;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
}

.overlay__btn--prev {
  left: 1.5rem;
  font-size: 3rem;
}

.overlay__btn--next {
  right: 1.5rem;
  font-size: 3rem;
}

.overlay__btn--close {
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
}

.overlay__zaehler {
  position: absolute;
  bottom: 1.2rem;
  color: #ccc;
  font-size: 1.2rem;
  font-family: sans-serif;
}

.overlay__controls {
  position: absolute;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.overlay__play-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 0.3rem 1rem;
  border-radius: 16px;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: inherit;
}

.overlay__speed {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}

.overlay__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #fff;
  width: 0%;
  transition: none;
}

/* ================================
   Podcasts
   ================================ */

.podcast-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}

.podcast-anzahl {
  font-size: 0.9rem;
  color: #888;
  background: #f0f0f0;
  border-radius: 20px;
  padding: 0.2rem 0.8rem;
}

.podcast-liste {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2rem;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

.podcast-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem 1.4rem;
  background: #fff;
  border-bottom: 1px solid #efefef;
  transition: background 0.15s;
}

.podcast-card:last-child {
  border-bottom: none;
}

.podcast-card:hover {
  background: #f7f9f7;
}

.podcast-card__nummer {
  display: none;
}

.podcast-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.podcast-card__titel {
  font-size: 1.4rem;
  font-weight: 600;
  color: #222;
}

.podcast-player {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  accent-color: #2e7d32;
}

/* ================================
   Bearbeiten-Seite
   ================================ */
.eintraege-abschnitt {
  margin-top: 2rem;
  border-top: 2px solid #ccc;
  padding-top: 1.5rem;
  width: 90vw;
  text-align: center;
}

.eintrag-zeile {
  border-top: 1px solid #eee;
  padding: 1.5rem 5vw;
  width: 90vw;
}

.eintrag-zeile__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.eintrag-zeile__links {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.eintrag-zeile__datum {
  color: darkslategrey;
  font-size: 1.2rem;
}

.badge--veroeffentlicht {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 0.95rem;
  padding: 0.2rem 0.7rem;
  border-radius: 12px;
  border: 1px solid #a5d6a7;
}

.badge--entwurf {
  background: #fff3e0;
  color: #e65100;
  font-size: 0.95rem;
  padding: 0.2rem 0.7rem;
  border-radius: 12px;
  border: 1px solid #ffcc80;
}

.eintrag-zeile__aktionen {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
}

.eintrag-zeile__text {
  font-size: 1.2rem;
  margin-top: 0.8rem;
}

.medien-vorschau {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.medien-vorschau__bild {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.medien-panel {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
}

.medien-panel__titel {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: darkslategrey;
}

.medium-karten {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.medium-karte {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.8rem;
  background: white;
  width: 200px;
}

.medium-karte__bild {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  display: block;
}

.medium-karte__placeholder {
  width: 100%;
  height: 120px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.medium-karte__checkboxen {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

.medium-loeschen-wrapper { width: 200px; }

.medium-loeschen-btn { width: 100%; }

.edit-panel {
  display: none;
  margin-top: 1rem;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.edit-form__datum-zeile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.edit-form__label { font-size: 1.1rem; }

.edit-form__datum-label {
  font-size: 1.1rem;
  min-width: 60px;
}

.edit-form__input {
  font-size: 1.1rem;
  padding: 0.4rem;
  font-family: inherit;
}

.edit-form__datum-input {
  font-size: 1.1rem;
  padding: 0.3rem;
}

.edit-form__gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.edit-form__editor {
  height: 230px;
  background: white;
}

.edit-form__aktionen {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.5rem;
  align-items: center;
}

.edit-form__verwendung { margin-top: 0.5rem; }

.spellcheck-ergebnis { margin-top: 0.5rem; }

.spellcheck-box {
  margin-top: 0.5rem;
  border: 1px solid #f0c040;
  background: #fffde7;
  border-radius: 6px;
  padding: 0.8rem;
  font-size: 1rem;
}

.spellcheck-box ul {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
  line-height: 1.8;
}

.spellcheck-fehler { color: #cc0000; }

.spellcheck-vorschlag { color: #2e7d32; }

.spellcheck-item {
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.3rem;
  transition: background 0.15s;
}

.spellcheck-item:hover {
  background: #fff8e1;
}

.spellcheck-ersatz {
  cursor: pointer;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 3px;
  padding: 1px 5px;
  font-style: normal;
  font-size: 0.95rem;
  margin: 0 2px;
  transition: background 0.15s;
}

.spellcheck-ersatz:hover {
  background: #c8e6c9;
}

/* ================================
   Quill Editor
   ================================ */
.ql-container,
.ql-editor,
.ql-toolbar {
  width: 100% !important;
  box-sizing: border-box;
}

.ql-editor {
  min-height: 150px;
  font-size: 1.2rem;
  font-family: Cambria, Georgia, serif;
}

/* ================================
   Login
   ================================ */
.login-form {
  max-width: 380px;
  width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  background: white;
}

.login-form h2 {
  text-align: center;
  font-size: 1.6rem;
  color: #333;
}

.login-fehler {
  color: #cc0000;
  text-align: center;
  font-size: 1rem;
  background: #fff0f0;
  padding: 0.5rem;
  border-radius: 4px;
}

/* ================================
   Profil
   ================================ */
.profil-card {
  margin-top: 2rem;
  width: 90vw;
  max-width: 420px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}

.profil-card__avatar {
  text-align: center;
  margin-bottom: 2rem;
}

.profil-card__avatar-icon { font-size: 3rem; }

.profil-card__name {
  font-size: 1.5rem;
  color: #333;
  margin-top: 0.5rem;
}

.profil-card__rolle {
  color: darkslategrey;
  font-size: 1rem;
}

.profil-card__pw-titel {
  font-size: 1.2rem;
  color: darkslategrey;
  margin-bottom: 1.2rem;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.profil-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ================================
   Backend
   ================================ */
.backend-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 2rem;
  padding-bottom: 3rem;
}

.meine-reisen { width: 100%; }

.meine-reisen__titel {
  text-align: center;
  margin-bottom: 1.5rem;
}

.freigabe-section {
  padding: 0.8rem 1rem;
  flex: 1;
}

.freigabe-titel {
  font-size: 0.95rem;
  color: darkslategrey;
  margin-bottom: 0.4rem;
}

.freigabe-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.freigabe-badge {
  background: #eee;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.freigabe-entfernen {
  background: none;
  border: none;
  color: #cc0000;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
}

.freigabe-form {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.3rem;
  width: 100%;
}

.freigabe-select {
  flex: 1;
  font-size: 0.95rem;
  padding: 0.2rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.freigabe-btn {
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #555;
  background: white;
  font-size: 0.95rem;
  font-family: inherit;
}

/* ================================
   Responsive — Tablet Portrait & Landscape (768–1024px)
   ================================ */
@media (max-width: 1024px) {
  .karten-grid .karte--blog { flex: 0 0 calc(33.333% - 2rem); max-width: calc(33.333% - 2rem); }
}

@media (max-width: 900px) {
  /* Eintrag-Layout: zweispaltig → einspaltig */
  .eintrag-layout {
    width: 100%;
    gap: 1.5rem;
    padding: 0;
    flex-direction: column;
    align-items: center;
  }
  .eintrag-bild-container { width: 90%; height: 260px; margin: 0 auto; }
  .eintrag-text { width: 90%; margin: 0 auto; font-size: 1.15rem; line-height: 1.8; }
  .eintrag-ueberschrift { font-size: 1.5rem; }

  /* Karten-Grid: 2 Spalten */
  .karten-grid .karte--blog { flex: 0 0 calc(50% - 2rem); max-width: calc(50% - 2rem); }

  /* Galerie: kleinere Thumbnails */
  .galerie-thumbnail { width: 180px; height: 120px; }

  /* Podcast: Audio-Player volle Breite bleibt, Padding etwas enger */
  .podcast-card { padding: 0.9rem 1rem; gap: 0.8rem; }
  .podcast-card__titel { font-size: 1.25rem; }
}

/* ================================
   Responsive — iPad Mini Portrait (768px)
   ================================ */
@media (max-width: 810px) and (orientation: portrait) {
  .header { min-height: 11rem; }
  .header h1 { font-size: 2.6rem; }
  .galerie-thumbnail { width: 160px; height: 108px; }
  .karten-grid .karte--blog { flex: 0 0 calc(50% - 1.5rem); max-width: calc(50% - 1.5rem); }
}

/* ================================
   Responsive — Handy Portrait (max 600px)
   ================================ */
@media (max-width: 600px) {
  .header { min-height: 10rem; }
  .header h1 { font-size: 2.2rem; margin-top: 3rem; }
  .nav-bar { padding: 0.8rem 1rem; gap: 1rem; }

  .eintrag-layout {
    width: 100%;
    gap: 1rem;
    padding: 0;
    flex-direction: column;
    align-items: center;
  }
  .eintrag-bild-container { width: 94%; height: 220px; margin: 0 auto; }
  .eintrag-text-scroll { width: 94%; margin: 0 auto; padding: 0 0.5rem; }
  .eintrag-text { width: 100%; font-size: 1.6rem; line-height: 1.85; }
  .eintrag-meta { font-size: 1.4rem; padding: 0 3%; text-align: center; }
  .eintrag-ueberschrift { font-size: 1.8rem; padding: 0 3%; text-align: center; }
  .eintrag-karte { height: 160px; }
  .eintrag-video { width: 100%; }

  /* Karten: eine Spalte */
  .karten-grid .karte--blog { flex: 0 0 100%; max-width: 100%; }

  /* Galerie: 2 Thumbnails pro Zeile, fluid */
  .galerie-grid { padding: 0 0.8rem 2rem; gap: 0.5rem; }
  .galerie-thumbnail { width: calc(50vw - 1.2rem); height: auto; aspect-ratio: 3/2; }

  /* Podcast */
  .podcast-card { padding: 0.8rem; gap: 0.6rem; flex-direction: column; }
  .podcast-card__nummer { display: none; }
  .podcast-card__titel { font-size: 1.2rem; }
  .podcast-player { height: 40px; }
  .podcast-header h2 { font-size: 1.8rem; }
}

/* ================================
   Responsive — kleine Handys (max 430px)
   iPhone SE, Galaxy A-Serie, …
   ================================ */
@media (max-width: 430px) {
  .header { min-height: 9rem; }
  .header h1 { font-size: 1.9rem; margin-top: 2.5rem; }
  .header__nav { right: 0.8rem; gap: 0.6rem; }
  .header__nav a { font-size: 1.2rem; }

  .nav-bar { padding: 0.6rem 0.8rem; gap: 0.7rem; }
  .container a { font-size: 1.3rem; }

  /* Admin-Formular stapeln */
  .admin-form-zeile { flex-wrap: wrap; }
  .admin-form-feld,
  .admin-form-feld--klein,
  .admin-form-feld--submit { flex: 1 1 100%; }
  .admin-form-feld input[type="submit"] { width: 100%; text-align: center; }

  /* Buttons: größeres Touch-Target */
  .btn { min-height: 36px; font-size: 1.1rem; padding: 0.5rem 0.8rem; }
  .galerie-upload-label { min-height: 44px; padding: 0.7rem 1rem; font-size: 1.1rem; }

  /* Karten-Grid enger */
  .karten-grid { padding: 0.5rem 0.6rem 2rem; gap: 0.8rem; }
  .reisen-grid  { padding: 0.6rem; gap: 0.8rem; }
  .karte__reise-body h3 { font-size: 1.2rem; }
  .karte__titel { font-size: 1rem; }

  /* Overlay */
  .overlay__controls { flex-wrap: wrap; justify-content: center; gap: 0.8rem; bottom: 2.5rem; }
  .overlay__karte { width: min(90vw, 260px); height: 150px; }
  .overlay__img { max-height: 70vh; }
  .overlay__btn--prev,
  .overlay__btn--next { font-size: 2.2rem; padding: 1rem 0.5rem; }
}

/* ================================
   Responsive — sehr kleine Handys (max 360px)
   Samsung Galaxy S24 ultra-schmal
   ================================ */
@media (max-width: 360px) {
  .header h1 { font-size: 1.6rem; }
  .galerie-thumbnail { width: calc(50vw - 1rem); }
  .podcast-card__titel { font-size: 1.1rem; }
}

/* ================================
   Responsive — Landscape Handy, mittlere Höhe (height 400–500px)
   Galaxy S23/S24, Pixel 7/8, iPhone 14/15 in Landscape
   ================================ */
@media (orientation: landscape) and (max-height: 500px) and (min-height: 401px) {
  .header {
    min-height: 11rem;
    position: relative;
  }
  .header h1 { font-size: 2rem; margin-top: 1rem; }
  .container { margin-top: 0.5vh; }
  .eintrag-layout { flex-direction: row; }
  .eintrag-bild-container { height: 200px; }
  /* Podcast kompakt */
  .podcast-card { padding: 0.7rem 1rem; }
  .podcast-card__titel { font-size: 1.1rem; }
  .podcast-player { height: 34px; }
}

/* ================================
   Responsive — Landscape Handy, flache Höhe (max 400px)
   Samsung Galaxy S24 (360px hoch), iPhone SE Landscape
   ================================ */
@media (orientation: landscape) and (max-height: 400px) {
  .header {
    min-height: 7rem;
    position: relative;
    background-image: linear-gradient(-3deg, white 50%, transparent 50%),
                      url("../images/background/bg.JPG");
    background-size: 100vw 3.5vh, cover;
  }
  .header h1 { font-size: 1.7rem; margin-top: 0.5rem; }
  .container { margin-top: 0.5vh; }
  /* Nav kompakter */
  .nav-bar { padding: 0.4rem 0.8rem; gap: 0.6rem; }
  /* Eintrag: zweispaltig bleibt, aber enger */
  .eintrag-bild-container { height: 160px; }
  /* Podcast */
  .podcast-card { padding: 0.5rem 0.8rem; gap: 0.5rem; }
  .podcast-card__titel { font-size: 1rem; }
  .podcast-player { height: 30px; }
  /* Overlay */
  .overlay__img { max-height: 78vh; }
  .overlay__controls { bottom: 1rem; gap: 0.6rem; }
}

/* ================================
   Karten-Grid responsive
   ================================ */
@media (max-width: 1200px) {
  .karten-grid .karte--blog { flex: 0 0 calc(33.333% - 2rem); max-width: calc(33.333% - 2rem); }
}

/* ================================
   Responsive — HD-Laptop / kleines Flatscreen (1366–1600px)
   Z.B. 1366×768, 1440×900, 1600×900
   ================================ */
@media (min-width: 1366px) and (max-width: 1600px) {
  .container    { max-width: 1280px; margin-left: auto; margin-right: auto; }
  .header       { min-height: 22rem; }
  .header h1    { font-size: 3.4rem; }

  .karten-grid .karte--blog { flex: 0 0 calc(33.333% - 2rem); max-width: calc(33.333% - 2rem); }
  .reisen-grid > a          { flex: 0 0 calc(33.333% - 2rem); max-width: calc(33.333% - 2rem); }
  .galerie-thumbnail        { width: 240px; height: 162px; }
  .podcast-card             { padding: 1.1rem 1.6rem; }
  .podcast-card__titel      { font-size: 1.3rem; }
}

/* ================================
   Responsive — Full HD Monitor (1601–1919px)
   Z.B. 1920×1080 am Schreibtisch (60 cm Abstand)
   ================================ */
@media (min-width: 1601px) and (max-width: 1919px) {
  .container    { max-width: 1560px; margin-left: auto; margin-right: auto; }
  .header       { min-height: 26rem; }
  .header h1    { font-size: 3.8rem; }
  .header__nav a { font-size: 1.6rem; }

  .nav-bar      { gap: 2rem; padding: 1rem 2.5rem; }
  .container a  { font-size: 1.5rem; }

  .karten-grid  { padding: 1rem 2.5rem 3rem; gap: 1.8rem; }
  .karten-grid .karte--blog { flex: 0 0 calc(25% - 1.8rem); max-width: calc(25% - 1.8rem); }

  .reisen-grid  { padding: 1rem 2.5rem; gap: 1.8rem; }
  .reisen-grid > a { flex: 0 0 calc(25% - 1.8rem); max-width: calc(25% - 1.8rem); }

  .galerie-grid { padding: 0 2.5rem 3rem; gap: 0.8rem; }
  .galerie-thumbnail { width: 260px; height: 174px; }

  .podcast-liste { max-width: 1100px; margin-left: auto; margin-right: auto; }
  .podcast-card__titel { font-size: 1.4rem; }

  .eintrag-text { font-size: 1.3rem; line-height: 1.85; }
  .eintrag-ueberschrift { font-size: 1.9rem; }
}

/* ================================
   Responsive — Full HD TV (1920×1080)
   TV-Browser meldet meist genau 1920px.
   Sitzabstand ~3m → Schriften ca. 3× größer als Monitor,
   Overscan-Rand ~5% an allen Seiten.
   ================================ */
@media (min-width: 1920px) and (max-width: 2559px) {
  html { font-size: 80%; }

  /* Overscan-Sicherheitsabstand */
  body { padding: 0 3vw; }

  .container    { width: 100%; max-width: 100%; padding: 0; }

  /* Header: groß und eindrucksvoll */
  .header       { min-height: 32rem; }
  .header h1    { font-size: 6rem; letter-spacing: 0.05em; }
  .header__nav  { top: 2rem; right: 4vw; gap: 2.5rem; }
  .header__nav a { font-size: 2.4rem; }

  /* Navigation */
  .nav-bar      { gap: 4rem; padding: 2rem 4vw; }
  .container a  { font-size: 2.4rem; }

  /* Karten-Grid: 3 Spalten – gut lesbar aus Distanz */
  /* gap wird von alten TV-Browsern ignoriert → margin als universeller Fallback */
  .karten-grid  { padding: 2rem 4vw 4rem; gap: 0; }
  .karten-grid .karte--blog { margin: 1.25rem; flex: 0 0 calc(33.333% - 2.5rem); max-width: calc(33.333% - 2.5rem); }
  .karte__datum  { font-size: 1.4rem; }
  .karte__titel  { font-size: 1.8rem; }

  /* Reisen-Grid */
  .reisen-grid  { padding: 2rem 4vw; gap: 0; }
  .reisen-grid > a { margin: 1.25rem; flex: 0 0 calc(33.333% - 2.5rem); max-width: calc(33.333% - 2.5rem); }
  .karte__reise-body h3 { font-size: 2.2rem; }
  .karte__reise-body p  { font-size: 1.6rem; }

  /* Galerie */
  .galerie-grid { padding: 0 4vw 4rem; gap: 1.5rem; }
  .galerie-thumbnail { width: 340px; height: 228px; }
  .galerie-header h2  { font-size: 3rem; }
  .btn--slideshow     { font-size: 2rem; padding: 0.8rem 2.5rem; }

  /* Podcasts */
  .podcast-header h2   { font-size: 3rem; }
  .podcast-anzahl      { font-size: 1.6rem; }
  .podcast-liste       { padding: 0 4vw; }
  .podcast-card        { padding: 2rem 3rem; gap: 2rem; }
  .podcast-card__titel { font-size: 2.4rem; }
  .podcast-player      { height: 54px; }

  /* Einzelner Eintrag */
  .eintrag-text         { font-size: 2rem; line-height: 2.1; }
  .eintrag-ueberschrift { font-size: 3rem; }
  .eintrag-meta         { font-size: 1.8rem; }
  .eintrag-bild-container { height: 500px; }

  /* Formulare & Buttons größer */
  .btn          { font-size: 1.8rem; padding: 0.6rem 1.4rem; }
  .galerie-leer { font-size: 2rem; }
}

/* ================================
   Responsive — QHD / 2K Monitor (2560×1440)
   ================================ */
@media (min-width: 2560px) and (max-width: 3839px) {
  html { font-size: 75%; }

  .container    { max-width: 2300px; margin-left: auto; margin-right: auto; }
  .header       { min-height: 40rem; }
  .header h1    { font-size: 6rem; }
  .header__nav a { font-size: 2rem; }

  .nav-bar      { gap: 3.5rem; padding: 1.5rem 4rem; }
  .container a  { font-size: 1.9rem; }

  .karten-grid  { padding: 1.5rem 4rem 4rem; gap: 2.5rem; }
  .karten-grid .karte--blog { flex: 0 0 calc(20% - 2.5rem); max-width: calc(20% - 2.5rem); }

  .reisen-grid  { padding: 1.5rem 4rem; gap: 2.5rem; }
  .reisen-grid > a { flex: 0 0 calc(20% - 2.5rem); max-width: calc(20% - 2.5rem); }

  .galerie-grid { padding: 0 4rem 4rem; gap: 1.2rem; }
  .galerie-thumbnail { width: 380px; height: 254px; }

  .podcast-liste { max-width: 1800px; margin: 0 auto; }
  .podcast-card { padding: 1.6rem 2.5rem; }
  .podcast-card__titel { font-size: 2rem; }

  .eintrag-text { font-size: 1.7rem; line-height: 2; }
  .eintrag-ueberschrift { font-size: 2.6rem; }
}

/* ================================
   Responsive — 4K UHD TV/Monitor (3840×2160)
   4K-TV-Browser meldet meist 3840px oder 1920px (→ dann greift Full-HD-TV-Regel).
   ================================ */
@media (min-width: 3840px) {
  html { font-size: 95%; }

  body { padding: 0 3vw; }

  .container    { width: 100%; max-width: 100%; }
  .header       { min-height: 55rem; }
  .header h1    { font-size: 9rem; letter-spacing: 0.04em; }
  .header__nav  { top: 2.5rem; right: 4vw; gap: 3rem; }
  .header__nav a { font-size: 3rem; }

  .nav-bar      { gap: 5rem; padding: 2.5rem 4vw; }
  .container a  { font-size: 3rem; }

  .karten-grid  { padding: 2.5rem 4vw 5rem; gap: 3.5rem; }
  .karten-grid .karte--blog { flex: 0 0 calc(25% - 3.5rem); max-width: calc(25% - 3.5rem); }
  .karte__datum  { font-size: 1.8rem; }
  .karte__titel  { font-size: 2.4rem; }

  .reisen-grid  { padding: 2.5rem 4vw; gap: 3.5rem; }
  .reisen-grid > a { flex: 0 0 calc(25% - 3.5rem); max-width: calc(25% - 3.5rem); }
  .karte__reise-body h3 { font-size: 3rem; }
  .karte__reise-body p  { font-size: 2rem; }

  .galerie-grid { padding: 0 4vw 5rem; gap: 2rem; }
  .galerie-thumbnail { width: 580px; height: 388px; }
  .galerie-header h2  { font-size: 4rem; }

  .podcast-header h2   { font-size: 4rem; }
  .podcast-liste       { padding: 0 4vw; }
  .podcast-card        { padding: 2.5rem 4rem; gap: 2.5rem; }
  .podcast-card__titel { font-size: 3rem; }
  .podcast-player      { height: 70px; }

  .eintrag-text         { font-size: 2.6rem; line-height: 2.1; }
  .eintrag-ueberschrift { font-size: 4rem; }
  .eintrag-meta         { font-size: 2.2rem; }
  .eintrag-bild-container { height: 700px; }

  .btn { font-size: 2.2rem; padding: 0.8rem 2rem; }
}

/* ============================================================================
   EINHEITLICHE KACHELN — exakt wie Portal-Startseite (.portal__kachel)
   Nur bis 1365px aktiv, damit die Breakpoint-Regeln fuer grosse Bildschirme
   (>= 1366px) nicht ueberschrieben werden.
   Gilt fuer Tagebuch-/Reisen-Uebersicht (.karte--reise) und
   Eintrags-Liste (.karte--blog).
   ============================================================================ */
@media (max-width: 1365px) {

/* Grid-Container wie .portal */
.karten-grid,
.reisen-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
  align-items: stretch;
  padding: 3rem 1.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Kachel-Item (Groesse): Blog-Einträge wie Portal, Reisen/Tagebücher kompakter */
.karten-grid .karte--blog {
  flex: 1 1 340px;
  max-width: 380px;
  width: auto;
  text-decoration: none;
  color: inherit;
}
.reisen-grid > a {
  flex: 1 1 220px;
  max-width: 280px;
  width: auto;
  text-decoration: none;
  color: inherit;
}

/* Visuelle Karte (Hintergrund/Rundung/Schatten) wie .portal__kachel */
.karten-grid .karte--blog,
.reisen-grid > a > .karte--reise {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Hover wie Portal: anheben statt skalieren */
.karten-grid .karte--blog:hover,
.reisen-grid > a:hover > .karte--reise {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* Bild / Platzhalter: 16:9 via Wrapper — height hier nicht nötig */

/* Textbereich wie .portal__kachel-body */
.karte__body,
.karte__reise-body {
  padding: 1.5rem 1.8rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

/* Titel wie .portal__kachel-titel */
.karte__titel,
.karte__reise-body h3 {
  font-family: Cambria, Georgia, serif;
  font-size: 1.6rem;
  font-weight: bold;
  color: #222;
  margin: 0;
}

/* Meta/Datum wie .portal__kachel-meta */
.karte__datum,
.karte__reise-body p,
.karte__reise-datum {
  font-size: 1.05rem;
  color: #777;
  margin: 0;
}

} /* Ende @media (max-width: 1365px) — EINHEITLICHE KACHELN */

/* Tablets (768px–1365px): reisen-grid etwas breiter, damit 4 Kacheln nicht passen */
@media (min-width: 768px) and (max-width: 1365px) {
  .reisen-grid > a {
    flex: 1 1 280px;
    max-width: 320px;
  }
}

/* Phones (≤ 600px): kompaktes Layout */
@media (max-width: 600px) {
  /* Reise-/Tagebuch-Liste: 2 pro Reihe */
  .reisen-grid {
    gap: 1rem;
    padding: 1.5rem 1rem;
  }
  .reisen-grid > a {
    flex: 1 1 140px;
    max-width: 200px;
  }

  /* Blog-Einträge: volle Breite */
  .karten-grid {
    gap: 1rem;
    padding: 1rem;
  }
  .karten-grid .karte--blog {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Muss nach allen breakpoint-spezifischen .container a-Regeln stehen,
   damit Links im Eintragtext dieselbe Größe wie der umgebende Text haben. */
.eintrag-text a {
  font-size: inherit;
}