/* Amenities der Villenseiten (Variante B, 27.09.2026) — Block erzeugt von notes/tools/amenities/build-amenities.mjs, Verhalten js/amenities.js.
   Zu: 6 große Highlight-Kacheln. Auf: alle Amenities alphabetisch als kleine Kacheln (ohne JavaScript immer „auf“). */
.amen{width:100%;container-type:inline-size;--amen-border:color-mix(in srgb,var(--villa) 40%,transparent);--amen-line:#e2ded5}
.amen-kicker{margin:0 0 14px;font:400 12px/1.4 "RalewayThin-Medium","Raleway",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5c5a53}
.amen-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));grid-auto-rows:1fr;gap:8px}
.amen-tile{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--amen-line);border-radius:10px;background:#fff;color:#3c3a34;min-width:0}
.amen-tile svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--villa);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.amen-tile span{font:15px/1.25 "RalewayThin-Light","Raleway",sans-serif;min-width:0}
.amen-tile.is-hi{border-color:var(--amen-border);background:color-mix(in srgb,var(--villa) 7%,#fff)}
.amen-tile.is-hi span{font-family:"RalewayThin-Regular","Raleway",sans-serif}
/* zu (nur mit JavaScript) */
.amen.is-closed .amen-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.amen.is-closed .amen-tile:not(.is-hi){display:none}
.amen.is-closed .amen-tile{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px 16px;border-radius:12px;border-color:var(--amen-border);background:#fff;transition:transform .35s ease,box-shadow .35s ease}
.amen.is-closed .amen-tile svg{width:42px;height:42px;stroke-width:1.1}
/* Alle Kacheln gleich groß, Symbol immer oben, Text am unteren Rand (29.09.2026, Thomas: „ich hasse es, wenn blöcke oder wie hier kacheln
   unterschiedliche grössen bekommen“ + „das icon immer oben ... der text sich nach dem unteren rand richtet“). Gleiche Reihenhöhe: grid-auto-rows:1fr oben. */
.amen.is-closed .amen-tile{justify-content:space-between}
.amen.is-closed .amen-tile span{margin-top:auto}
.amen.is-closed .amen-tile span{font:22px/1.1 "CormorantGaramondLight-Regular","Cormorant Garamond",Georgia,serif;color:#101010}
@media (hover:hover){.amen.is-closed .amen-tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--villa) 70%,transparent)}
 .amen.is-closed .amen-tile:hover svg{animation:amen-wiggle .6s ease}}
/* Spalten nach der Breite des Bereichs (nicht des Fensters): große Kacheln erst ab 440 px zu dritt */
@container (max-width:440px){.amen.is-closed .amen-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:360px){.amen-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.amen-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:none;border:0;border-bottom:1px solid var(--villa);padding:2px 0;cursor:pointer;color:#101010;font:15px "RalewayThin-Regular","Raleway",sans-serif}
.amen-more:focus-visible{outline:2px solid var(--villa);outline-offset:3px}
.amen-plus{display:inline-block;transition:transform .35s ease}
.amen-more[aria-expanded="true"] .amen-plus{transform:rotate(45deg)}
/* Erscheinen (einmal, wenn der Bereich sichtbar wird) */
.amen.is-in.is-closed .amen-tile{animation:amen-rise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*90ms)}
.amen.is-in.is-closed .amen-tile svg *{stroke-dasharray:90;animation:amen-draw 1.6s ease both;animation-delay:calc(var(--i,0)*90ms + 200ms)}
@keyframes amen-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes amen-draw{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
@keyframes amen-wiggle{30%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.amen *,.amen *::before{animation:none!important;transition:none!important}}