/* =============================================================================
   Villa Sana Management GmbH – Portalseite (www.villasana.at, Seite 53)
   Contao-Fassung von _design/villasana-portal/variante-c3.html (2026-07-26).
   Wird NUR von Layout 11 „VS Portal" geladen – Selektoren dürfen global sein.
   villasana.css ist auf diesem Layout NICHT aktiv (keine .content-image-Falle).
   ============================================================================= */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../../files/villasana/fonts/cormorant-garamond-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../../files/villasana/fonts/cormorant-garamond-500-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../../files/villasana/fonts/cormorant-garamond-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../../files/villasana/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../../files/villasana/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../../files/villasana/fonts/inter-600.woff2') format('woff2')}

:root{
  --olive:#737828; --olive-dark:#565b1d; --olive-hell:#b4b878;
  --tinte:#31350f; --tinte-tief:#24270a;
  --creme:#f0efe2; --creme-mute:rgba(240,239,226,.66);
  --paper:#fffdf8; --canvas:#f7f6f1; --ink:#2b2a26; --muted:#6b675d;
  --line:#e3e0d4; --line-stark:#cfcaba;
  --rand:clamp(24px,3.8vw,62px);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.28,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--canvas)}
body{background:var(--canvas);color:var(--ink);font:400 17px/1.66 var(--sans);
     -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:var(--olive);color:var(--paper)}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
html[lang="de"] [data-lang="en"]{display:none}
html[lang="en"] [data-lang="de"]{display:none}

/* Contao-Utility: Skip-Links u. Ä. barrierefrei verstecken (kein Framework-CSS geladen) */
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Papierkorn – ein Hauch Materialität über allem */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== Choreografie ===================================================== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes zeigen{from{opacity:0}to{opacity:1}}

/* ===== Vorwort ========================================================== */
.kopf{background:var(--paper);text-align:center;border-bottom:1px solid var(--line);
      padding:clamp(30px,4.2vh,52px) clamp(20px,4vw,56px) clamp(36px,5vh,62px)}
.marke{display:flex;flex-direction:column;align-items:center;gap:5px;
      margin:0 auto clamp(38px,5.1vh,62px);animation:rise .8s .08s var(--ease) both}
.marke__wort{width:min(250px,52vw)}
.marke__zusatz{font:500 clamp(13px,1vw,14.5px)/1 var(--serif);letter-spacing:.2em;
      color:var(--olive-dark)}
.kopf__leitsatz{font:500 clamp(23px,3vw,42px)/1.15 var(--serif);color:var(--olive-dark);
      margin:0 auto 12px;
      animation:rise .8s .2s var(--ease) both}
.kopf__text{max-width:77ch;margin:0 auto;color:var(--muted);
      font-size:clamp(15.5px,1.1vw,16.5px);line-height:1.7;text-wrap:pretty;
      animation:rise .8s .32s var(--ease) both}

/* ===== Zwei Tafeln ====================================================== */
.felder{display:grid;grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto auto auto 1fr auto}
.feld{grid-row:1/-1;display:grid;grid-template-rows:subgrid;position:relative;
      padding:clamp(30px,3.6vw,56px) var(--rand) clamp(32px,3.8vw,56px);
      transition:background .5s var(--ease)}
.feld:focus-visible{outline-offset:-4px}
.feld--medical{background:var(--canvas);border-right:1px solid var(--line);
      animation:rise .85s .48s var(--ease) both}
.feld--medical:hover{background:#fbfaf4}
.feld--gdo{background:linear-gradient(180deg,var(--tinte) 0%,var(--tinte-tief) 100%);
      color:var(--creme);animation:rise .85s .6s var(--ease) both}

.tafel{grid-row:1;margin:0 0 clamp(22px,2.8vh,34px);padding:10px 10px 0;
      background:var(--paper);border:1px solid var(--line);
      transition:border-color .5s var(--ease)}
.feld--gdo .tafel{background:rgba(240,239,226,.05);border-color:rgba(240,239,226,.22)}
.feld--medical:hover .tafel{border-color:var(--line-stark)}
.feld--gdo:hover .tafel{border-color:rgba(240,239,226,.38)}
.tafel__bild{overflow:hidden}
.tafel img{width:100%;aspect-ratio:3/2;object-fit:cover;
      transform:scale(1.015);transition:transform 1.4s var(--ease)}
.feld--gdo .tafel img{object-position:center 44%}
.feld:hover .tafel img{transform:scale(1.055)}
.tafel figcaption{padding:9px 2px 10px;
      font:500 10.5px/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;
      color:var(--muted)}
.feld--gdo .tafel figcaption{color:rgba(240,239,226,.55)}

.feld__zeile{grid-row:2;display:flex;align-items:center;gap:13px;padding-bottom:15px}
.feld__nr{font:italic 500 21px/1 var(--serif);color:var(--olive);letter-spacing:.02em}
.feld--gdo .feld__nr{color:var(--olive-hell)}
.feld__strich{width:26px;height:1px;background:currentColor;opacity:.45;flex:none;
      transition:width .5s var(--ease)}
.feld:hover .feld__strich{width:46px}
.feld__ort{font:600 11px/1.4 var(--sans);letter-spacing:.19em;text-transform:uppercase;
      color:var(--olive-dark)}
.feld--gdo .feld__ort{color:rgba(240,239,226,.78)}

.feld__titel{grid-row:3;font:500 clamp(28px,2.7vw,38px)/1.1 var(--serif);
      padding-bottom:14px;text-wrap:balance}
.feld__titel em{font-style:italic;color:var(--olive)}
.feld--gdo .feld__titel{color:var(--creme)}
.feld--gdo .feld__titel em{color:var(--olive-hell)}

.feld__text{grid-row:4;max-width:54ch;color:var(--muted);
      font-size:clamp(15.5px,1.05vw,16.5px);line-height:1.72;
      padding-bottom:clamp(24px,2.6vw,36px)}
.feld--gdo .feld__text{color:var(--creme-mute)}

.feld__cta{grid-row:6;justify-self:start;align-self:end;
      display:inline-flex;align-items:center;gap:12px;
      font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
      padding:17px 28px;border:1px solid var(--olive);color:var(--olive-dark);
      transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.feld__cta::after{content:"\2192";font-size:15px;transition:transform .35s var(--ease)}
.feld--medical:hover .feld__cta{background:var(--olive);color:#fff}
.feld--gdo .feld__cta{border-color:rgba(240,239,226,.5);color:var(--creme)}
.feld--gdo:hover .feld__cta{background:var(--creme);border-color:var(--creme);color:var(--tinte)}
.feld:hover .feld__cta::after{transform:translateX(5px)}

/* ===== Fuß ============================================================== */
.fuss{background:var(--canvas);border-top:1px solid var(--line);
      animation:zeigen .8s .9s var(--ease) both}
.fuss__inhalt{padding:16px var(--rand);
      display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
      font-size:13px;color:var(--muted)}
.fuss a{border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.fuss a:hover{color:var(--olive);border-bottom-color:var(--olive)}
.fuss__rechts{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.sprache{display:flex;gap:8px;align-items:center;letter-spacing:.1em;font-size:11.5px;font-weight:600;text-transform:uppercase}
.sprache a{color:var(--muted);border-bottom:1px solid transparent}
.sprache a:hover{color:var(--olive)}
.sprache a[aria-current="true"]{color:var(--olive);border-bottom-color:var(--olive)}
.sprache span{opacity:.45}

/* ===== Schmale Fenster ================================================== */
@media(max-width:900px){
  .felder{display:block}
  .feld{display:block;padding-top:clamp(28px,6vw,40px)}
  .feld--medical{border-right:0;border-bottom:1px solid var(--line)}
  .feld__cta{margin-top:8px}
}
@media(max-width:760px){.fuss__inhalt{justify-content:center;text-align:center}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}