/* urlaubshuetten.com – moderne Akzente 2026 (Stand 03.10.2026). Quelle: Hugomaschine/Cowork. Entfernen = Link im Seitenlayout löschen. */
/* urlaubshuetten.com – moderne Akzente, Vorschlag 03.10.2026 (Redesign mit Markenerhalt) */
:root{--uh-amber-text:#8a6326;--uh-schatten:0 1px 2px rgba(64,52,30,.06),0 12px 28px -16px rgba(64,52,30,.35);--uh-radius:10px}
h1,h2,h3,.headline{text-wrap:balance}
#main .uh-dyn__h2{text-wrap:wrap}
p,li{text-wrap:pretty}
.uh-dyn__h2,.uh-section h2{max-width:none}
/* Kick-Zeilen: lesbar (5:1), normale Schreibweise statt Versalien */
.uh-dyn__kick,.uh-kf-kick{color:var(--uh-amber-text)!important;text-transform:none!important;letter-spacing:.01em!important}
/* Kacheln: Beschriftung aufs Foto, Verlauf statt Textschatten, ein Radius */
#main .uh-section .ce_rsce_tiles{grid-auto-rows:auto!important;align-items:stretch!important}
#main .uh-section .ce_rsce_tiles .tile{display:block!important;position:relative!important;aspect-ratio:4/5!important;height:auto!important;min-height:0!important;border-radius:var(--uh-radius);overflow:hidden;box-shadow:var(--uh-schatten);border:0!important;background:#2e4423!important}
#main .uh-section .ce_rsce_tiles .tile .image{position:absolute!important;inset:0!important;height:100%!important;width:100%!important}
#main .uh-section .ce_rsce_tiles .tile .image figure,#main .uh-section .ce_rsce_tiles .tile .image picture{display:block;height:100%}
#main .uh-section .ce_rsce_tiles .tile .image figure{margin:0}
#main .uh-section .ce_rsce_tiles .tile .image img{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .6s cubic-bezier(.2,.7,.2,1)!important}
#main .uh-section .ce_rsce_tiles .tile .content{position:absolute!important;left:0;right:0;bottom:0;height:auto!important;padding:64px 16px 14px!important;background:linear-gradient(to top,rgba(28,34,16,.86) 0%,rgba(28,34,16,.55) 55%,rgba(28,34,16,0) 100%)!important;border:0!important}
#main .uh-section .ce_rsce_tiles .tile .content .title{padding:0!important;text-shadow:none!important;text-align:left!important;font-size:19px!important}
#main .uh-section .ce_rsce_tiles .tile .content .title,#main .uh-section .ce_rsce_tiles .tile .content .title *{color:#fff!important;justify-content:flex-start!important}
#main .uh-section .ce_rsce_tiles .tile[href]:hover .image img{transform:scale(1.04)!important}
#main .ce_rsce_tiles figcaption{display:none!important}
/* Keine Waisen: 5 Kacheln = 2 groß + 3, 6 Kacheln = 3 + 3 */
@media (min-width:768px){
 #main :is(.uh-section--worlds,.uh-section--regions) .ce_rsce_tiles:has(> a.tile:nth-of-type(5):last-of-type){grid-template-columns:repeat(6,1fr)!important}
 #main :is(.uh-section--worlds,.uh-section--regions) .ce_rsce_tiles:has(> a.tile:nth-of-type(5):last-of-type)>a.tile{grid-column:span 2!important}
 #main :is(.uh-section--worlds,.uh-section--regions) .ce_rsce_tiles:has(> a.tile:nth-of-type(5):last-of-type)>a.tile:nth-of-type(-n+2){grid-column:span 3!important}
 #main :is(.uh-section--worlds,.uh-section--regions) .ce_rsce_tiles:has(> a.tile:nth-of-type(5):last-of-type)>a.tile:nth-of-type(-n+2){aspect-ratio:16/10!important}
 #main :is(.uh-section--worlds,.uh-section--regions) .ce_rsce_tiles:has(> a.tile:nth-of-type(6):last-of-type){grid-template-columns:repeat(3,1fr)!important}
 #main :is(.uh-section--worlds,.uh-section--regions) .ce_rsce_tiles:has(> a.tile:nth-of-type(6):last-of-type)>a.tile{aspect-ratio:3/2!important}
}
/* Karten: ein Radius, warm getönter Schatten statt Grau */
#main .uh-dyn__card,#main .accommodation-card,body.home #main .mod_article a.tile:has(img){border-radius:var(--uh-radius)!important;box-shadow:var(--uh-schatten)!important;border-color:transparent!important}
/* Bedienung: sichtbarer Fokus, kleines Nachgeben beim Klick */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #5a7027!important;outline-offset:3px}
.btn,.uh-dyn__btn,.uh-verm-btn,button.submit{transition:transform .12s ease,background-color .2s ease}
.btn:active,.uh-dyn__btn:active,.uh-verm-btn:active,button.submit:active{transform:translateY(1px)}
/* Vermieter-Knopf: Weiß auf Honig war 3,1 : 1, jetzt 5,4 : 1 */
.uh-verm-btn{background:#8a6326!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Handy: 5 Kacheln = erste über die volle Breite, dann 2 + 2 */
@media (max-width:767px){
 #main .uh-section--worlds .ce_rsce_tiles:has(> a.tile:nth-of-type(5):last-of-type)>a.tile:first-of-type{grid-column:1/-1!important;aspect-ratio:16/10!important}
}
/* ---------- Unterkunftskarten (Startseite, Listen) ---------- */
#main .uh-dyn__imgwrap,#main .accommodation-card .image,#main .accommodation-card figure{overflow:hidden}
#main .uh-dyn__imgwrap img,#main .accommodation-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#main .uh-dyn__card:hover .uh-dyn__imgwrap img,#main .accommodation-card:hover img{transform:scale(1.04)}
#main .uh-dyn__pill{text-transform:none!important;letter-spacing:0!important;border-radius:6px!important;font-weight:600}
#main .uh-dyn__card,#main .accommodation-card{transition:transform .25s ease,box-shadow .25s ease}
@media (hover:hover){#main .uh-dyn__card:hover,#main .accommodation-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(64,52,30,.06),0 18px 34px -18px rgba(64,52,30,.45)!important}}

/* ---------- Häufige Fragen: ruhige Karten, Plus dreht sich, weiches Aufklappen ---------- */
#main .uh-section--faq .ce_accordionSingle{background:#fff;border-radius:10px;box-shadow:0 1px 2px rgba(64,52,30,.06),0 8px 20px -14px rgba(64,52,30,.3);overflow:hidden}
#main .uh-section--faq .ce_accordionSingle .toggler{background:#fff!important;font-family:"Fira Sans UH","Segoe UI",system-ui,sans-serif!important;font-weight:600;font-size:17px;text-align:left!important;padding:16px 52px 16px 20px!important;position:relative;border:0!important}
#main .uh-section--faq .ce_accordionSingle .toggler::after{content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;margin-top:-6px;
 background:linear-gradient(#5a7027,#5a7027) center/12px 2px no-repeat,linear-gradient(#5a7027,#5a7027) center/2px 12px no-repeat;transition:transform .3s ease}
#main .uh-section--faq .ce_accordionSingle .toggler.active::after,#main .uh-section--faq .ce_accordionSingle .toggler[aria-expanded=true]::after{transform:rotate(45deg)}
#main .uh-section--faq .ce_accordionSingle .toggler>*:last-child:not(:first-child){display:none}
#main .uh-section--faq .ce_accordionSingle .accordion{padding:0 20px 4px!important;background:#fff!important}

/* ---------- Klappboxen der Detailseiten ---------- */
#main .accommodation-detail__location-description details{border-radius:10px;overflow:hidden;margin-top:14px;box-shadow:0 1px 2px rgba(64,52,30,.06),0 8px 20px -14px rgba(64,52,30,.3);background:#fff}
#main .accommodation-detail__location-description details>summary{margin-top:0!important;border-radius:0;transition:background-color .2s ease;padding:14px 18px!important}
#main .accommodation-detail__location-description details>summary:hover{background:#4f6322!important}
#main .accommodation-detail__location-description details>summary>span:first-child{display:inline-block;transition:transform .3s ease;font-size:.8em}
#main .accommodation-detail__location-description details[open]>summary>span:first-child{transform:rotate(180deg)}
#main .accommodation-detail__location-description details>div{border:0!important}
@supports (interpolate-size:allow-keywords){
 :root{interpolate-size:allow-keywords}
 #main .accommodation-detail__location-description details::details-content{height:0;overflow:hidden;transition:height .35s ease,content-visibility .35s allow-discrete}
 #main .accommodation-detail__location-description details[open]::details-content{height:auto}
}

/* ---------- Tabellen (z. B. Stornogebühren): ruhig, Zahlen bündig ---------- */
#main table{border-collapse:separate!important;border-spacing:0;border-radius:10px;overflow:hidden;font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px #e6dccb}
#main table thead tr{background:#5a7027!important}
#main table th{font-weight:600;letter-spacing:.01em;padding:10px 14px!important}
#main table td{border-bottom:0!important;padding:10px 14px!important}
#main table td,#main table th{border-left:0!important;border-right:0!important}
#main table tbody tr:nth-child(even) td{background:#faf6ee}
#main table td:last-child,#main table th:last-child{text-align:right!important;white-space:nowrap}
#main table td:last-child{font-weight:600;color:#2b2721}

/* ---------- Startbild: Zeile über der Überschrift lesbar auf hellem Himmel ---------- */
.uh-section--hero .swiper-content .text>p:first-child{display:inline-block;background:rgba(28,34,16,.42);padding:5px 12px;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ---------- Bewegung mit Grund (nur wer nichts anderes eingestellt hat) ---------- */
@media (prefers-reduced-motion:no-preference){
 /* Startbild: ein einziger, geordneter Auftritt – erst Überschrift, dann Satz, dann Suche */
 @keyframes uh-hero{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
 .uh-section--hero .swiper-content .text>*{animation:uh-hero .9s cubic-bezier(.16,1,.3,1) both}
 .uh-section--hero .swiper-content .text>*:nth-child(2){animation-delay:.12s}
 .uh-section--hero .swiper-content .text>*:nth-child(3){animation-delay:.24s}
 .uh-section--hero .swiper-content .text>*:nth-child(n+4){animation-delay:.36s}
 /* Kacheln und Karten erscheinen beim Hineinscrollen der Reihe nach (Browser mit Scroll-Animationen) */
 @supports (animation-timeline:view()){
  @keyframes uh-auf{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
  #main .uh-section .ce_rsce_tiles>a.tile,#main .uh-dyn__card,#main .uh-inspo__grid>*{animation:uh-auf linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  #main .uh-section .ce_rsce_tiles>a.tile:nth-of-type(3n+2),#main .uh-dyn__card:nth-child(3n+2){animation-range:entry 6% entry 46%}
  #main .uh-section .ce_rsce_tiles>a.tile:nth-of-type(3n),#main .uh-dyn__card:nth-child(3n){animation-range:entry 12% entry 52%}
 }
}

/* Hero-Text mittig auf Handy/Tablet (03.10.2026): Ueberschrift hat max-width 17ch, Theme setzt margin 0 !important → stand links */
html body .uh-section--hero.uh-section--hero .swiper-content .textccontainer .text > p,
html body .uh-section--hero.uh-section--hero .swiper-content .textccontainer .text > div{margin-left:auto !important;margin-right:auto !important}

/* ===== 03.10.2026 Nachtrag b ===== */
/* Logo Handy/Tablet: stand zu tief, „HUETTEN“ wurde von der gruenen Navigation verdeckt */
@media (max-width:1022px){
  html body #header .navbar-outer a.logo{margin-top:8px !important;width:112px !important;height:42px !important;background-position:left center !important}
}
/* Titelbild heller und frischer, dezenter Glanz (alle Breiten) */
html body .uh-section--hero .swiper-slide picture img{filter:brightness(1.1) contrast(1.05) saturate(1.12)}
html body .uh-section--hero .swiper-slide{position:relative}
html body .uh-section--hero .swiper-outer > .swiper-content{z-index:2}
html body .uh-section--hero .swiper-slide::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 70% 0%,rgba(255,250,235,.28),rgba(255,250,235,0) 60%),
             linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.16) 48%,rgba(255,255,255,0) 60%);
  background-size:100% 100%,250% 100%;background-position:0 0,120% 0;background-repeat:no-repeat}
@media (prefers-reduced-motion:no-preference){
  html body .uh-section--hero .swiper-slide::after{animation:uh-glanz 2.4s cubic-bezier(.22,.61,.36,1) .6s 1 both}
  @keyframes uh-glanz{from{background-position:0 0,120% 0}to{background-position:0 0,-20% 0}}
}
/* Handy/Tablet (Hugo 03.10.2026): Titeltext weiss im Bild wie am Computer, Suchkachel unter dem Bild */
@media (max-width:1023px){
  html body .uh-section--hero.uh-section--hero.uh-section--hero,
  html body .uh-section--hero.uh-section--hero.uh-section--hero .simpleslider,
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-outer,
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-wrapper,
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-slide{height:auto !important;min-height:0 !important;overflow:visible !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-outer{position:relative !important;--uh-hero-h:clamp(320px,88vw,520px)}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-slide{overflow:hidden !important}
  html body #container .uh-section--hero.uh-section--hero.uh-section--hero .swiper-slide picture img{display:block;width:100% !important;height:clamp(320px,88vw,520px) !important;max-height:none !important;min-height:0 !important;object-fit:cover;object-position:center 40%;transform:none !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-outer .swiper-content{position:static !important;transform:none !important;inset:auto !important;width:auto !important;height:auto !important;max-width:none;margin:0 !important;padding:0 !important;display:block !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .textccontainer{position:absolute !important;top:0;left:0;right:0;height:clamp(320px,88vw,520px);margin:0 !important;padding:20px 18px !important;z-index:2;
    display:flex !important;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(18,22,14,.10) 0%,rgba(18,22,14,.34) 55%,rgba(18,22,14,.42) 100%) !important;box-shadow:none !important;border-radius:0 !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .textccontainer .text{background:transparent !important;box-shadow:none !important;border:0 !important;padding:0 !important;margin:0 auto !important;max-width:560px}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .textccontainer .text,
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .textccontainer .text p{color:#fff !important;-webkit-text-fill-color:#fff !important;text-shadow:0 2px 14px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35) !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .textccontainer .text p.heading--2{font-size:clamp(28px,7.6vw,44px) !important;line-height:1.15 !important;max-width:16ch;margin-bottom:8px !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .textccontainer .text .uh-hero-sub{font-size:clamp(15px,4vw,18px) !important;max-width:32ch}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .textccontainer .text > p:first-child:not(.heading--2){display:none !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .textccontainer .text .btn a{color:#fff !important;-webkit-text-fill-color:#fff !important;text-shadow:none !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .text::before{display:none !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero::after{display:none !important}
  html body .uh-section--hero.uh-section--hero.uh-section--hero .swiper-content .hero-cta{position:static !important;margin:16px auto 4px !important;width:calc(100% - 32px) !important;max-width:460px;top:auto !important}
  html body .mod_article.uh-section--service.uh-section--service{margin-top:24px !important}
}
/* Startbild-Text ohne Einblenden: sofort sichtbar (besser fuer Ladezeit-Messung LCP, nichts wirkt halb durchsichtig) */
html body .uh-section--hero .swiper-content .text > *{animation:none !important;opacity:1 !important}

/* UH-CLS-HUETTENFINDER 03.10.2026: Mobil den Hüttenfinder-Filter schon vor dem Laden des Skripts zu lassen.
   Vorher war er beim ersten Bild offen und klappte danach zu - die Liste sprang um rund 1100 px (CLS 0,36).
   Sobald das Skript die untere Leiste (.uh-mobilebar) gesetzt hat, gilt wieder die normale Regel mit .uh-closed. */
@media (max-width:999px){body:not(:has(.uh-mobilebar)) .accommodation-search .accommodation-search__sidebar{display:none!important}}

/* UH-STICKY-FILTER 03.10.2026: Auf der Hüttenfinder-Liste lag die globale Leiste (.mobile-sticky, z-index 102) über der Filterleiste (.uh-mobilebar) -
   der Filterknopf war nicht antippbar, oben blieb ein roter Streifen. Der Hüttenfinder-Knopf der globalen Leiste öffnet den Filter ohnehin (bestehendes Skript) - die verdeckte Zweitleiste wird mobil ausgeblendet. */
@media (max-width:999px){body:has(.mobile-sticky) .uh-mobilebar{display:none!important}}