/* Casa Vista Mar – Gäste-Feedback (Deutsch & Englisch)
   Dunkles Design passend zum Kontaktformular: Hintergrund #4b4b4b, alles andere in Weiß.
   Alle Regeln sind auf #cvm-feedback begrenzt, damit sich Divi und das Formular nicht gegenseitig beeinflussen.
   Schriften: es werden die bereits auf casa-vista-mar.de geladenen Schriften genutzt (keine externen Google-Fonts). */

#cvm-feedback{
  --cvm-bg:#4b4b4b;
  --cvm-white:#ffffff;
  --cvm-soft:rgba(255,255,255,.72);
  --cvm-faint:rgba(255,255,255,.45);
  --cvm-line:rgba(255,255,255,.28);
  --cvm-card:rgba(255,255,255,.05);
  --cvm-field:rgba(255,255,255,.06);
  --cvm-good:#a9dbb8; --cvm-mid:#f1d08e; --cvm-bad:#ffc9c4;
  --cvm-display:"Linden Hill Load","Linden Hill","Times New Roman",Georgia,serif;
  --cvm-script:HamiltonScript,"Pinyon Script","Snell Roundhand",cursive;
  --cvm-body:"Roboto flex load","Roboto Flex","Open Sans",Helvetica,Arial,sans-serif;

  background:var(--cvm-bg);color:var(--cvm-soft);
  padding:clamp(28px,6vw,64px) clamp(18px,5vw,56px);
  font-family:var(--cvm-body);font-size:16px;line-height:1.65;font-weight:400;text-align:left;
}
#cvm-feedback *,#cvm-feedback *::before,#cvm-feedback *::after{box-sizing:border-box}
#cvm-feedback [hidden]{display:none!important}
#cvm-feedback .cvm-section,#cvm-feedback .cvm-thanks{max-width:760px;margin:0 auto}

/* Kopf */
#cvm-feedback .cvm-head{text-align:center;padding:0 0 10px}
#cvm-feedback .cvm-title{font-family:var(--cvm-display);font-weight:400;color:var(--cvm-white);font-size:clamp(26px,4.4vw,38px);line-height:1.2;margin:0 0 18px;padding:0;letter-spacing:.02em;text-wrap:balance}
#cvm-feedback .cvm-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:12.5px;letter-spacing:.04em;color:var(--cvm-soft)}
#cvm-feedback .cvm-legend span{display:inline-flex;align-items:center;gap:6px}
#cvm-feedback .cvm-legend b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--cvm-line);font-weight:500;color:var(--cvm-white);font-size:11.5px}

/* Fortschritt */
#cvm-feedback .cvm-progress{position:sticky;top:0;z-index:5;background:var(--cvm-bg);padding:14px 0;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cvm-soft)}
body.admin-bar #cvm-feedback .cvm-progress{top:32px}
#cvm-feedback .cvm-bar{flex:1;height:2px;background:var(--cvm-line);position:relative}
#cvm-feedback .cvm-bar i{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--cvm-white);transition:width .35s ease}
#cvm-feedback .cvm-count{font-variant-numeric:tabular-nums;min-width:4.5em;text-align:right;color:var(--cvm-white)}

/* Formular & Karten */
#cvm-feedback .cvm-form{display:grid;gap:18px;padding:8px 0 8px;margin:0}
#cvm-feedback .cvm-card{border:1px solid rgba(255,255,255,.14);margin:0;padding:28px clamp(18px,4vw,36px);background:var(--cvm-card);min-width:0}
#cvm-feedback .cvm-legend-q{float:left;width:100%;padding:0;margin:0 0 18px;border:0}
#cvm-feedback .cvm-eyebrow{display:block;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--cvm-soft);margin-bottom:8px;font-weight:500}
#cvm-feedback .cvm-q{font-family:var(--cvm-display);font-size:22px;color:var(--cvm-white);line-height:1.3;font-weight:400;display:block;text-wrap:balance}
#cvm-feedback .cvm-hint{display:block;font-size:13.5px;margin-top:6px;color:var(--cvm-soft)}

#cvm-feedback .cvm-field{display:grid;gap:10px;clear:both;margin:0;padding:0}
#cvm-feedback .cvm-lbl{font-size:14.5px;color:var(--cvm-white);font-weight:500}
#cvm-feedback .cvm-req{color:var(--cvm-white)}
#cvm-feedback input[type=text],#cvm-feedback textarea{
  width:100%;margin:0;font-family:var(--cvm-body);font-size:16px;line-height:1.5;color:var(--cvm-white);
  background:var(--cvm-field);border:1px solid var(--cvm-line);padding:13px 15px;border-radius:0;box-shadow:none;
  transition:border-color .2s,background .2s;color-scheme:dark;-webkit-appearance:none;appearance:none}
#cvm-feedback textarea{min-height:120px;resize:vertical}
#cvm-feedback input::placeholder,#cvm-feedback textarea::placeholder{color:var(--cvm-faint)}
#cvm-feedback input[type=text]:focus,#cvm-feedback textarea:focus{outline:none;border-color:var(--cvm-white);background:rgba(255,255,255,.1)}
#cvm-feedback .cvm-err{font-size:13.5px;color:var(--cvm-bad)}
#cvm-feedback .cvm-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* versteckte echte Eingaben */
#cvm-feedback .cvm-chip input,#cvm-feedback .cvm-seg input,#cvm-feedback .cvm-yn input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}

/* Chips (Mehrfachauswahl) */
#cvm-feedback .cvm-chips{clear:both;display:flex;flex-wrap:wrap;gap:10px}
#cvm-feedback .cvm-chip{position:relative;margin:0;padding:0}
#cvm-feedback .cvm-chip span{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--cvm-line);background:transparent;color:var(--cvm-white);font-size:14.5px;cursor:pointer;transition:all .18s;user-select:none}
#cvm-feedback .cvm-chip span:hover{border-color:var(--cvm-white)}
#cvm-feedback .cvm-chip span::before{content:"";width:14px;height:14px;border:1px solid var(--cvm-white);flex:none;transition:all .18s}
#cvm-feedback .cvm-chip input:checked+span{background:var(--cvm-white);border-color:var(--cvm-white);color:var(--cvm-bg)}
#cvm-feedback .cvm-chip input:checked+span::before{background:var(--cvm-bg);border-color:var(--cvm-bg);box-shadow:inset 0 0 0 3px var(--cvm-white)}
#cvm-feedback .cvm-chip input:focus-visible+span,#cvm-feedback .cvm-seg input:focus-visible+span,#cvm-feedback .cvm-yn input:focus-visible+span{outline:2px solid var(--cvm-white);outline-offset:2px}

/* Schulnoten */
#cvm-feedback .cvm-rows{clear:both;display:grid}
#cvm-feedback .cvm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
#cvm-feedback .cvm-row:first-child{border-top:0;padding-top:4px}
#cvm-feedback .cvm-row-l{min-width:0;display:grid;gap:2px}
#cvm-feedback .cvm-row-name{color:var(--cvm-white);font-size:15.5px;font-weight:500}
#cvm-feedback .cvm-row-val{font-size:12.5px;letter-spacing:.06em;min-height:1.2em}
#cvm-feedback .cvm-row-val[data-g="1"],#cvm-feedback .cvm-row-val[data-g="2"]{color:var(--cvm-good)}
#cvm-feedback .cvm-row-val[data-g="3"],#cvm-feedback .cvm-row-val[data-g="4"]{color:var(--cvm-mid)}
#cvm-feedback .cvm-row-val[data-g="5"],#cvm-feedback .cvm-row-val[data-g="6"]{color:var(--cvm-bad)}
#cvm-feedback .cvm-seg{display:flex;border:1px solid var(--cvm-line)}
#cvm-feedback .cvm-seg label{position:relative;margin:0;padding:0}
#cvm-feedback .cvm-seg span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;color:var(--cvm-white);font-variant-numeric:tabular-nums;font-size:15px;border-left:1px solid var(--cvm-line);transition:background .15s,color .15s}
#cvm-feedback .cvm-seg label:first-child span{border-left:0}
#cvm-feedback .cvm-seg span:hover{background:rgba(255,255,255,.1)}
#cvm-feedback .cvm-seg input:checked+span{background:var(--cvm-white);color:var(--cvm-bg);font-weight:600}

/* Ja / Nein */
#cvm-feedback .cvm-yn{clear:both;display:inline-flex;gap:10px}
#cvm-feedback .cvm-yn label{position:relative;margin:0;padding:0}
#cvm-feedback .cvm-yn span{display:inline-flex;align-items:center;justify-content:center;min-width:110px;padding:11px 22px;border:1px solid var(--cvm-line);background:transparent;color:var(--cvm-white);cursor:pointer;font-size:14.5px;letter-spacing:.06em;transition:all .18s}
#cvm-feedback .cvm-yn span:hover{border-color:var(--cvm-white)}
#cvm-feedback .cvm-yn input:checked+span{background:var(--cvm-white);border-color:var(--cvm-white);color:var(--cvm-bg);font-weight:600}
#cvm-feedback .cvm-follow{margin-top:20px;animation:cvmFade .3s ease}
@keyframes cvmFade{from{opacity:.4;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Senden */
#cvm-feedback .cvm-submit{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:16px;text-align:center}
#cvm-feedback .cvm-btn{font-family:var(--cvm-body);cursor:pointer;background:var(--cvm-white);color:var(--cvm-bg);border:1px solid var(--cvm-white);border-radius:3px;padding:16px 52px;font-size:14px;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;font-weight:600;transition:background .2s,color .2s}
#cvm-feedback .cvm-btn:hover{background:transparent;color:var(--cvm-white)}
#cvm-feedback .cvm-btn:focus-visible{outline:2px solid var(--cvm-white);outline-offset:3px}
#cvm-feedback .cvm-btn[disabled]{opacity:.6;cursor:wait}
#cvm-feedback .cvm-small{font-size:12.5px;max-width:52ch;color:var(--cvm-soft)}
#cvm-feedback .cvm-small a{color:var(--cvm-white);text-decoration:underline;text-underline-offset:3px}

/* Danke */
#cvm-feedback .cvm-thanks{text-align:center;padding:24px 0;display:flex;flex-direction:column;align-items:center;gap:14px;outline:none}
#cvm-feedback .cvm-rule{width:1px;height:56px;background:var(--cvm-line)}
#cvm-feedback .cvm-thanks-title{font-family:var(--cvm-script);font-weight:400;font-size:54px;color:var(--cvm-white);margin:0;padding:0;line-height:1.2}
#cvm-feedback .cvm-thanks-text{max-width:48ch}
#cvm-feedback .cvm-sign{font-family:var(--cvm-script);font-size:30px;color:var(--cvm-white);line-height:1.2}

@media (max-width:782px){body.admin-bar #cvm-feedback .cvm-progress{top:0}}
@media (max-width:620px){
  #cvm-feedback .cvm-row{grid-template-columns:1fr}
  #cvm-feedback .cvm-seg{width:100%}
  #cvm-feedback .cvm-seg label{flex:1}
  #cvm-feedback .cvm-seg span{width:100%}
  #cvm-feedback .cvm-yn{display:flex}
  #cvm-feedback .cvm-yn label{flex:1}
  #cvm-feedback .cvm-yn span{width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce){#cvm-feedback *{transition:none!important;animation:none!important}}