/*
Theme Name: Hellas Reisen Berlin 2026
Description: Neues Theme für hellasreisen.berlin im bisherigen Erscheinungsbild – responsiv, ohne externe Dienste.
Version: 1.9.31
Text Domain: hellasreisen
*/

:root {
  --text: #333;
  --text-leicht: #666;
  --linie: #ddd;
  --flaeche: #f5f5f5;
  --leiste: #ececec;
  --rot: #ce020d;
  --gelb: #fdf12b;
  --gruen: #00901f;
  --schwarz: #000;
  --akzent: #00901f;
  --breite: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 15px/1.6 Quicksand, Arial, sans-serif;
}
img { max-width: 100%; height: auto; }
a { color: #111; }
a:hover { color: var(--gruen); }
h1, h2, h3 { line-height: 1.3; color: #111; }
h1 { font-size: 1.5rem; margin: .2em 0 .6em; }
h2 { font-size: 1.2rem; margin: 1.6em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--linie); }
h3 { font-size: 1.05rem; }
table { border-collapse: collapse; max-width: 100%; }
td, th { padding: 6px 10px; vertical-align: top; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; top: 6px; left: 6px; z-index: 999; clip: auto; width: auto; height: auto; background: #fff; padding: 8px 12px; }

/* ---------- Menüleiste ---------- */
.leiste { background: var(--leiste); position: sticky; top: 0; z-index: 50; }
.leiste-innen { max-width: var(--breite); margin: 0 auto; display: flex; align-items: center; }
.menue-knopf { display: none; background: none; border: 0; font: inherit; font-weight: 700; padding: 12px 16px; cursor: pointer; }
.hauptmenue { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.hauptmenue > li { position: relative; border-bottom: 3px solid var(--schwarz); }
.hauptmenue > li.rot { border-color: var(--rot); }
.hauptmenue > li.gelb { border-color: var(--gelb); }
.hauptmenue > li.gruen { border-color: var(--gruen); }
.hauptmenue > li.schwarz { border-color: var(--schwarz); }
.hauptmenue a { display: block; padding: 10px 14px; text-decoration: none; font-weight: 700; font-size: 14px; color: #111; }
.hauptmenue a:hover, .hauptmenue .current-menu-item > a, .hauptmenue .current-menu-ancestor > a { background: #fff; }
.hauptmenue .sub-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 240px; background: #fff; list-style: none; margin: 0; padding: 4px 0; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.hauptmenue .sub-menu .sub-menu { left: 100%; top: 0; }
.hauptmenue li:hover > .sub-menu, .hauptmenue li:focus-within > .sub-menu { display: block; }
.hauptmenue .sub-menu a { font-weight: 400; padding: 7px 14px; }
.leiste-suche { margin-left: auto; padding: 6px 10px; }
.leiste-suche input { border: 1px solid #ccc; border-radius: 3px; padding: 5px 8px; font: inherit; width: 160px; }

/* ---------- Grundlayout ---------- */
.wrap { max-width: var(--breite); margin: 0 auto; }
.layout { display: grid; grid-template-columns: 230px 1fr; gap: 0; }
.seitenleiste { padding: 18px 16px; text-align: center; background: #fff; }
.seitenleiste .logo img { max-width: 190px; }
.adresse { font-size: 14px; margin: 10px 0 18px; }
.adresse a { text-decoration: none; }
.kat-baum { text-align: left; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.kat-baum ul { list-style: none; padding-left: 14px; margin: 2px 0 6px; }
.kat-baum li { margin: 0; }
.kat-baum a { display: block; padding: 5px 4px; text-decoration: none; font-weight: 700; }
.kat-baum ul a { font-weight: 400; }
.kat-baum .current-cat > a, .kat-baum .current-cat-ancestor > a { color: var(--gruen); }
.kat-titel { text-align: left; font-weight: 700; margin: 0 0 4px; font-size: 14px; color: var(--text-leicht); text-transform: uppercase; letter-spacing: .04em; }
.inhalt { padding: 0 22px 30px; min-width: 0; }
.kopfbild { margin: 0 -22px 14px; height: 300px; background: #ddd center/cover no-repeat; }
.brotkrumen { font-size: 13px; color: var(--text-leicht); margin: 10px 0 14px; }
.brotkrumen a { color: #444; font-weight: 700; text-decoration: none; }

/* ---------- Startseite ---------- */
.start-kopf { text-align: center; padding: 26px 16px 10px; }
.start-kopf .logo img { max-width: 260px; }
.start-kopf .adresse { margin: 8px 0 0; }
.kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 18px 0; }
.kachel { position: relative; display: block; aspect-ratio: 4/3; background: #ccc center/cover no-repeat; text-decoration: none; overflow: hidden; }
.kachel span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.78); color: #111; text-align: center; font-size: 1.15rem; padding: 10px 6px; transition: background .2s; }
.kachel:hover span { background: rgba(255,255,255,.95); }
.start-text { text-align: center; padding: 0 16px; }
.empfehlungen { padding: 0 16px; }
.empfehlungen > h2 { border: 0; color: var(--text-leicht); font-size: 1rem; }

/* ---------- Listen (Kategorien, Suche, Empfehlungen) ---------- */
.liste { display: grid; gap: 14px; }
.liste.zweispaltig { grid-template-columns: 1fr 1fr; }
.karte { display: grid; grid-template-columns: 150px 1fr; gap: 14px; background: var(--flaeche); padding: 12px; }
.karte img { width: 150px; height: 150px; object-fit: cover; display: block; }
.karte h3 { margin: 0 0 6px; font-size: 1rem; }
.karte h3 a { text-decoration: none; }
.karte p { margin: 0 0 6px; font-size: 14px; }
.karte .fakten { font-size: 13px; color: var(--text-leicht); }

/* ---------- Einzelseite ---------- */
.fakten-box { display: flex; flex-wrap: wrap; gap: 6px 18px; background: var(--flaeche); padding: 10px 14px; margin: 14px 0; font-size: 14px; }
.fakten-box span { white-space: nowrap; }
.merkmale { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.merkmale li { background: #eef6ef; border: 1px solid #cfe5d3; border-radius: 14px; padding: 2px 10px; font-size: 13px; }
.abschnitt table { width: 100%; }
.abschnitt td { border-bottom: 1px solid #eee; }
#Preis, .preistabelle table { width: 100%; font-size: 14px; }
.preistabelle { overflow-x: auto; }
.preistabelle td { border: 1px solid #ddd; text-align: center; }
.preistabelle tr:first-child td { background: var(--flaeche); font-weight: 700; }
.preistabelle td:first-child { text-align: left; }
.anfrage-box { margin: 28px 0 10px; padding: 16px; text-align: center; }
.kontakt-hinweis { color: #008000; margin: 0 0 12px; }
.kontakt-hinweis a { color: #008000; font-weight: 700; }
.knopf, button.knopf, input[type=submit].knopf { display: inline-block; background: var(--gruen); color: #fff !important; border: 0; border-radius: 4px; padding: 10px 18px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.knopf:hover { background: #007419; }
.knopf.hell { background: #fff; color: #111 !important; border: 1px solid #bbb; }

/* Galerie + Lightbox */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.gallery .gallery-item { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 3px; }
.gallery .gallery-caption { display: block; font-size: 13px; line-height: 1.3; color: #555; margin-top: 4px; }
.gallery.mehr-verborgen .gallery-item:nth-child(n+7) { display: none; }
.mehr-bilder { display: block; margin: 6px auto 0; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.lightbox img { max-width: 92vw; max-height: 86vh; }
.lightbox button { position: absolute; background: rgba(255,255,255,.15); color: #fff; border: 0; font-size: 28px; width: 48px; height: 48px; cursor: pointer; border-radius: 50%; }
.lightbox .zu { top: 14px; right: 14px; }
.lightbox .vor { right: 14px; top: 50%; }
.lightbox .zurueck { left: 14px; top: 50%; }
.lightbox .zaehler { position: absolute; bottom: 14px; color: #ccc; font-size: 14px; }
.lightbox .bildtext { position: absolute; bottom: 38px; left: 16px; right: 16px; text-align: center; color: #fff; font-size: 16px; }

/* Karte (2-Klick) */
.hr-karte { position: relative; background: #e7ecef url('images/karte.svg') center/cover; min-height: 260px; display: flex; align-items: center; justify-content: center; text-align: center; margin: 10px 0; border: 1px solid #ddd; }
.hr-karte .hinweis { background: rgba(255,255,255,.94); padding: 14px 16px; max-width: 420px; font-size: 13px; }
.hr-karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Formulare */
.formular { display: grid; gap: 12px; max-width: 640px; }
.formular .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formular label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.formular input, .formular select, .formular textarea { width: 100%; padding: 8px; border: 1px solid #bbb; border-radius: 3px; font: inherit; }
.formular .check { display: flex; gap: 8px; font-weight: 400; }
.formular .check input { width: auto; margin-top: 4px; }
.hp-feld { position: absolute; left: -9999px; }
.meldung { padding: 12px 14px; margin: 0 0 14px; background: #eef6ef; border-left: 4px solid var(--gruen); }
.meldung.fehler { background: #fbeaea; border-color: var(--rot); }
.suchformular { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; background: var(--flaeche); padding: 12px; margin: 0 0 18px; }
.suchformular > div { flex: 1 1 170px; }
.suchformular label { display: block; font-size: 13px; font-weight: 700; }
.suchformular select, .suchformular input { width: 100%; padding: 7px; border: 1px solid #bbb; border-radius: 3px; font: inherit; }

/* ---------- Fußbereich ---------- */
.fuss { background: var(--leiste); margin-top: 30px; font-size: 14px; }
.fuss-innen { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 26px; padding: 24px 16px; }
.fuss h3 { margin-top: 0; font-size: 1rem; }
.fuss ul { padding-left: 18px; margin: 0; }
.fuss .hr-karte { min-height: 180px; margin: 0; }
.fuss-links { border-top: 1px solid #d6d6d6; text-align: center; padding: 12px 16px; }
.fuss-links a { margin: 0 8px; text-decoration: none; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .seitenleiste { order: 2; border-top: 1px solid var(--linie); }
  .seitenleiste .logo, .seitenleiste .adresse { display: none; }
  .kopfbild { height: 200px; }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .liste.zweispaltig { grid-template-columns: 1fr; }
  .fuss-innen { grid-template-columns: 1fr; }
  .menue-knopf { display: block; }
  .hauptmenue { display: none; width: 100%; flex-direction: column; }
  .leiste-innen { flex-wrap: wrap; }
  .leiste.offen .hauptmenue { display: flex; }
  .hauptmenue > li { border-bottom-width: 2px; }
  .hauptmenue li { position: relative; }
  .hauptmenue .sub-menu, .hauptmenue .sub-menu .sub-menu { position: static; display: none; box-shadow: none; background: #f7f7f7; padding-left: 14px; }
  .hauptmenue li:hover > .sub-menu, .hauptmenue li:focus-within > .sub-menu { display: none; }
  .hauptmenue li.auf > .sub-menu { display: block; }
  .hauptmenue a { padding-right: 52px; }
  .untermenue-knopf { position: absolute; right: 0; top: 0; width: 48px; height: 41px; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
  .hauptmenue li.auf > .untermenue-knopf { transform: rotate(45deg); }
  .leiste-suche { order: 1; }
  .leiste-suche input { width: 130px; }
}
@media (max-width: 560px) {
  .inhalt { padding: 0 14px 24px; }
  .kopfbild { margin: 0 -14px 12px; height: 170px; }
  .karte { grid-template-columns: 100px 1fr; }
  .karte img { width: 100px; height: 100px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .formular .zeile { grid-template-columns: 1fr; }
  .kachel span { font-size: 1rem; }
}

/* Seitenleiste: Unterorte nur bei der aktuell gewählten Region aufklappen (wie bisher) */
.kat-baum > li > ul li > ul.children { display: none; }
.kat-baum li.current-cat > ul.children,
.kat-baum li.current-cat-parent > ul.children,
.kat-baum li.current-cat-ancestor > ul.children { display: block; }

.untermenue-knopf { display: none; }
@media (max-width: 900px) { .untermenue-knopf { display: block; } }

/* Anfrage: Hinweise zu Mindestaufenthalt und Belegung */
.meldung.hinweis { background: #eef3fa; border-color: #0d5eaf; }
.datum-hinweis { margin: -4px 0 0; font-size: 14px; color: var(--text-leicht); min-height: 1.2em; }
.datum-hinweis.fehler { color: var(--rot); font-weight: 700; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.belegung { margin: 10px 0 0; font-size: 14px; }

/* Reisefilter */
.reisefilter{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;background:#f4f4f4;border-left:4px solid var(--gruen,#00901f);padding:14px 16px;margin:0 0 20px}
.reisefilter>div{display:flex;flex-direction:column;min-width:120px;flex:1 1 120px}
.reisefilter label{font-size:.85em;font-weight:600;margin-bottom:4px}
.reisefilter input,.reisefilter select{padding:7px 8px;border:1px solid #bbb;border-radius:3px;font:inherit;background:#fff}
.reisefilter .rf-aktion{flex:0 0 auto;min-width:0}
.reisefilter .rf-reset{background:none;border:1px solid #999;border-radius:3px;padding:7px 12px;cursor:pointer;font:inherit}
.reisefilter .rf-reset:hover{border-color:#333}
.reisefilter .rf-anzahl{flex-basis:100%;margin:0;font-size:.9em;color:#555}
.reisefilter .rf-anzahl:empty{display:none}
.karte[hidden]{display:none!important}
@media (max-width:600px){.reisefilter>div{flex:1 1 100%}}

/* Anfrageformular: Kinder, Richtpreis */
.formular .kinder-alter{flex-wrap:wrap}
.formular .kinder-alter>div{flex:1 1 140px}
.formular .personen-hinweis:empty{display:none}
.formular .personen-hinweis.fehler{color:var(--rot,#ce020d);font-weight:600}
.formular .richtpreis{background:#eef7f0;border-left:4px solid var(--gruen,#00901f);padding:10px 14px;margin:6px 0 14px}
.formular .richtpreis small{color:#555}
.formular [hidden]{display:none!important}

/* 1.4.0 – Unterkunftssuche, Kalender, Belegungsplan */
.unterkunftssuche .us-hinweis{flex-basis:100%;margin:0;font-size:.82em;color:#666}
.karte .verfuegbar{margin:6px 0 0;font-size:13px;font-weight:600;padding:3px 8px;display:inline-block;border-radius:3px}
.karte .verfuegbar[hidden]{display:none}
.karte .verfuegbar.frei{background:#e3f3e7;color:#00691a}
.karte .verfuegbar.anfrage{background:#fff8c4;color:#5a4f00}

.hr-kalender{border:1px solid var(--linie);padding:10px;margin:0 0 6px;background:#fff;max-width:640px}
.kal-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.kal-kopf button{background:none;border:1px solid #bbb;border-radius:3px;font-size:20px;line-height:1;width:34px;height:34px;cursor:pointer}
.kal-kopf button:disabled{opacity:.3;cursor:default}
.kal-info{font-size:.9em;font-weight:600}
.kal-monate{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kal-titel{text-align:center;font-weight:600;margin-bottom:4px}
.kal-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kal-wt{text-align:center;font-size:11px;color:#777}
.kal-tag{border:0;background:#e3f3e7;color:#222;font:inherit;font-size:13px;padding:6px 0;border-radius:2px;cursor:pointer;text-align:center}
.kal-tag:hover:not(:disabled){outline:2px solid var(--gruen)}
.kal-tag.belegt{background:#f6d4d6;color:#999;text-decoration:line-through}
.kal-tag.vorbei,.kal-tag.gesperrt{background:#f2f2f2;color:#bbb}
.kal-tag:disabled{cursor:not-allowed}
.kal-tag.wahl-an,.kal-tag.wahl-ab{background:var(--gruen);color:#fff;text-decoration:none}
.kal-tag.wahl-zw{background:#9fd3ac}
.kal-legende{font-size:12px;color:#555;margin:8px 0 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kal-legende .kal-tag{display:inline-block;width:22px;padding:2px 0;cursor:default;font-size:11px}
@media (max-width:640px){.kal-monate{grid-template-columns:1fr}}

.belegungsplan{max-width:100%}
.bp-kopf{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.bp-kopf button{background:none;border:1px solid #bbb;border-radius:3px;font-size:20px;line-height:1;width:34px;height:34px;cursor:pointer}
.bp-kopf button:disabled{opacity:.3;cursor:default}
.bp-scroll{overflow-x:auto;max-width:100%}
.belegungsplan table{border-collapse:separate;border-spacing:2px;font-size:11px;min-width:100%}
.belegungsplan th{font-weight:400;color:#666;padding:0 1px;text-align:center;min-width:16px}
.belegungsplan th.we{color:var(--rot)}
.belegungsplan tbody th{text-align:left;white-space:nowrap;padding-right:8px;font-weight:600;color:#333;font-size:12px}
.belegungsplan td{height:22px;min-width:16px;border-radius:2px}
.belegungsplan td.frei,.bp-legende .frei{background:#7cc58e}
.belegungsplan td.belegt,.bp-legende .belegt{background:#e58a90}
.belegungsplan td.vorbei{background:#eee}
.bp-legende{font-size:12px;color:#555;display:flex;gap:6px;align-items:center;margin:6px 0 0}
.bp-legende span{display:inline-block;width:14px;height:14px;border-radius:2px}

/* 1.7.0 – Immobilien */
.immo-daten table{border-collapse:collapse;width:100%;max-width:640px;margin-bottom:12px}
.immo-daten th,.immo-daten td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
.immo-daten th{width:38%;font-weight:600;color:#555}
.karte.immo .fakten{font-weight:600;color:var(--text)}

/* Mietwagen-Widget */
.mietwagen-widget{max-width:760px;margin:10px 0 20px;min-height:600px}
.mietwagen-hinweis{font-size:14px;color:#555}

.mietwagen-klick{min-height:0;background:#eef4f8;border:1px solid #d5e2ea;padding:22px 20px;text-align:center}
.mietwagen-klick .hinweis{max-width:520px;margin:0 auto;font-size:14px}
.mietwagen-klick .knopf{font-size:17px;padding:12px 26px}

/* Anfrageformular: angefragte Reise/Unterkunft oben */
.anfrage-objekt{display:flex;gap:14px;align-items:center;border:1px solid #e3e3e3;border-radius:8px;padding:12px;margin:0 0 18px;background:#fafafa}
.anfrage-objekt img{width:96px;height:96px;object-fit:cover;border-radius:6px;display:block}
.anfrage-objekt p{margin:0 0 4px}
.anfrage-objekt .ao-label{font-size:.85em;color:#666}
.anfrage-objekt .ao-titel{font-weight:600;line-height:1.3}
.anfrage-objekt .ao-titel a{text-decoration:none}
.anfrage-objekt .ao-fakten{font-size:.9em;color:#444}
.anfrage-objekt .ao-zurueck{font-size:.9em}
@media (max-width:480px){.anfrage-objekt img{width:72px;height:72px}}

/* Unterkunftssuche: kompakt, „Mehr Filter“ zum Aufklappen */
.unterkunftssuche{gap:8px 10px;padding:10px 12px;margin-bottom:14px}
.unterkunftssuche>div:not(.us-mehr),.unterkunftssuche .us-mehr>div{min-width:0;flex:1 1 115px}
.unterkunftssuche label{font-size:.78em;margin-bottom:2px}
.unterkunftssuche input,.unterkunftssuche select{padding:5px 6px;font-size:.9em}
.unterkunftssuche>.us-mehr-zeile,.unterkunftssuche>.rf-aktion{flex:0 0 auto!important}
.unterkunftssuche .us-mehr-knopf,.unterkunftssuche .rf-reset{background:#fff;border:1px solid var(--gruen,#00901f);color:var(--gruen,#00901f);border-radius:3px;padding:5px 10px;cursor:pointer;font:inherit;font-size:.9em;font-weight:600;white-space:nowrap}
.unterkunftssuche .rf-reset{border-color:#999;color:#444;font-weight:400}
.unterkunftssuche .us-mehr-knopf::after{content:" ▾"}
.unterkunftssuche.mehr-offen .us-mehr-knopf::after{content:" ▴"}
.unterkunftssuche .us-mehr{flex:1 1 100%;border-top:1px solid #ddd;padding-top:8px}
.unterkunftssuche .us-mehr[hidden]{display:none!important}
.unterkunftssuche .us-mehr:not([hidden]){display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 10px;align-items:flex-end}
.unterkunftssuche .us-haken{flex-direction:row!important;flex-wrap:wrap;gap:4px 12px;align-items:center;flex:2 1 230px!important}
.unterkunftssuche .us-haken-titel{flex-basis:100%;font-size:.78em;font-weight:600}
.unterkunftssuche .us-haken label{font-weight:400;margin:0;display:flex;align-items:center;gap:5px;font-size:.9em}
.unterkunftssuche .us-haken input{width:16px;height:16px;padding:0}
.unterkunftssuche .rf-anzahl{font-size:.85em}
.unterkunftssuche .us-hinweis{flex-basis:100%;margin:0;font-size:.78em;color:#666}
.unterkunftssuche .us-hinweis[hidden]{display:none}
@media (max-width:600px){
.unterkunftssuche>div:not(.us-mehr),.unterkunftssuche .us-mehr>div{flex:1 1 calc(50% - 5px)!important}
.unterkunftssuche>.us-mehr-zeile,.unterkunftssuche>.rf-aktion{flex:1 1 calc(50% - 5px)!important}
.unterkunftssuche .us-mehr-knopf,.unterkunftssuche .rf-reset{width:100%}
.unterkunftssuche .us-haken{flex:1 1 100%!important}
}

/* Startseite: Logo + Adresse links, Begrüßungstext rechts, darunter die Kacheln */
.start-kopf.kopf-neben{display:grid;grid-template-columns:300px 1fr;column-gap:44px;align-items:center;text-align:left;padding:30px 16px 12px}
.kopf-links{text-align:center}
.kopf-links .logo img{max-width:240px;display:inline-block}
.kopf-links .adresse{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-leicht)}
.kopf-neben .kopf-text{border-left:1px solid var(--linie);padding:4px 0 4px 44px;font-size:15px;line-height:1.65;max-width:720px}
.kopf-neben .kopf-text p{text-align:left!important;margin:0}
.kopf-neben .kopf-text br{display:none}
.kopf-neben .kopf-text strong{display:block;font-size:18px;line-height:1.35;color:#111;margin-bottom:10px}
@media (max-width:760px){
  .start-kopf.kopf-neben{grid-template-columns:1fr;row-gap:18px}
  .kopf-neben .kopf-text{border-left:0;padding:16px 0 0;border-top:1px solid var(--linie);max-width:none}
  .kopf-neben .kopf-text p{text-align:center!important}
}

/* Startseite: Empfehlungen als kompakte Liste (kleines Bild, Name, Ort, Preis) */
.empfehlungen > h2{font-size:1.15rem;color:var(--text);margin:26px 0 12px}
.emp-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px}
.emp-karte{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;text-decoration:none;color:var(--text);padding:8px;border:1px solid var(--linie);background:#fff;transition:border-color .2s}
.emp-karte:hover{border-color:#999}
.emp-karte:hover strong{text-decoration:underline}
.emp-bild{display:block;width:84px;height:84px;overflow:hidden;background:#ddd}
.emp-bild img{width:84px;height:84px;object-fit:cover;display:block}
.emp-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.emp-info strong{font-size:.95rem;color:#111;line-height:1.3}
.emp-ort{font-size:13px;color:var(--text-leicht);line-height:1.35}
.emp-preis{margin-top:3px;font-size:13px;font-weight:600;color:var(--gruen)}
@media (max-width:900px){.emp-raster{grid-template-columns:1fr 1fr}}
.emp-raster.emp-zwei{grid-template-columns:1fr 1fr}
.emp-preis.emp-folgt{color:var(--text-leicht);font-weight:400}
@media (max-width:560px){.emp-raster{grid-template-columns:1fr}}

/* Empfehlungen: grauer Rahmen */
.emp-raster .emp-karte:hover{box-shadow:0 2px 10px rgba(0,0,0,.12)}

/* Pauschalreisen-Suche (wie Mietwagen-Suche) */
.pauschal-widget{margin:10px 0 20px}
.pauschal-klick{background:#eef4f8;border:1px solid #d5e2ea;padding:22px 20px;text-align:center}
.pauschal-klick .hinweis{max-width:560px;margin:0 auto;font-size:14px}
.pauschal-klick .knopf{font-size:17px;padding:12px 26px}

/* Lange Untermenüs (z. B. Unterkünfte) am Computer in Spalten statt einer zu langen Liste */
@media (min-width: 901px) {
  .hauptmenue .sub-menu li { position: relative; }
  .hauptmenue > li > .sub-menu:has(> li:nth-child(13)) { grid-auto-flow: column; grid-template-rows: repeat(10, auto); width: max-content; min-width: 0; column-gap: 4px; padding: 6px 4px; }
  .hauptmenue > li:hover > .sub-menu:has(> li:nth-child(13)),
  .hauptmenue > li:focus-within > .sub-menu:has(> li:nth-child(13)) { display: grid; }
  .hauptmenue > li > .sub-menu:has(> li:nth-child(13)) > li > a { min-width: 170px; }
  .hauptmenue .sub-menu .sub-menu { z-index: 20; }
}

/* Inselgruppen im Menü (Kykladen, Dodekanes …): Kennzeichen für Untermenü */
.hauptmenue li.gruppe > a { cursor: default; }
.hauptmenue .sub-menu li.gruppe > a::after { content: " ›"; color: #888; }
@media (max-width: 900px) { .hauptmenue li.gruppe > a { cursor: pointer; } .hauptmenue .sub-menu li.gruppe > a::after { content: ""; } }

/* Seitenleiste: Inselgruppen wie im Menü, per Klick aufklappen */
.kat-baum li.kat-gruppe.auf > ul.children { display: block; }
.kat-gruppe-knopf { display: block; width: 100%; background: none; border: 0; padding: 5px 4px; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.kat-gruppe-knopf::after { content: " +"; color: #888; }
.kat-gruppe-knopf[aria-expanded="true"]::after { content: " −"; }

/* Startseite Handy: erst Logo, dann die Kacheln, dann der Begrüßungstext (am PC unverändert) */
@media (max-width:760px){
  main.wrap:has(> .start-kopf){display:flex;flex-direction:column}
  main.wrap > .start-kopf.kopf-neben{display:contents}
  main.wrap > .start-kopf .kopf-links{order:1;padding:24px 16px 14px}
  main.wrap > .kacheln{order:2}
  main.wrap > .start-kopf .kopf-text{order:3;margin:18px 16px 0;padding-top:16px}
  main.wrap > .empfehlungen{order:4}
}

/* Menüpunkt „Startseite“ nur auf dem Handy */
@media (min-width: 901px) { .hauptmenue > li.nur-handy { display: none; } }

/* Startseite: Adresszeilen; Telefonnummer antippbar */
.kopf-links .adr-zeile { display: block; }
.kopf-links .adresse a[href^="tel:"] { color: inherit; text-decoration: none; }
@media (max-width: 760px) {
  main.wrap > .start-kopf .kopf-links { padding: 14px 16px 10px; }
  .kopf-links .logo img { max-width: 170px; }
  .kopf-links .adresse { margin-top: 6px; font-size: 12.5px; line-height: 1.5; }
  .kopf-links .adresse a[href^="tel:"] { text-decoration: underline; }
}
/* Handy: aufgeklapptes Menü über die volle Breite */
@media (max-width: 900px) {
  .leiste-innen > nav { flex: 1 1 100%; order: 2; }
  .leiste-innen > .menue-knopf { order: 0; }
  .leiste-suche { order: 1; }
  .leiste.offen .hauptmenue { background: #fff; }
}

/* Handy: langes Menü innerhalb der (oben fixierten) Leiste scrollbar */
@media (max-width: 900px) {
  .leiste.offen .leiste-innen > nav { max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}
@media (max-width: 900px) {
  .admin-bar .leiste.offen .leiste-innen > nav { max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); }
}
.lightbox img { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-drag: none; }
/* Großansicht im Querformat auf dem Handy: Bild füllt den ganzen Bildschirm, Bedienelemente liegen darüber */
@media (orientation: landscape) and (max-height: 560px) {
  .lightbox { background: #000; }
  .lightbox img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: auto; height: auto; }
  .lightbox button { background: rgba(0,0,0,.35); }
  .lightbox .zu { top: 8px; right: 8px; }
  .lightbox .bildtext { bottom: 8px; left: 70px; right: 70px; font-size: 13px; text-shadow: 0 1px 3px #000; }
  .lightbox .zaehler { top: 14px; bottom: auto; left: 14px; text-shadow: 0 1px 3px #000; }
}