/* Sami's Care – Stil
   Schriften, Grundeinstellungen, Bewegungen und Zustände.
   Die Gestaltung der einzelnen Bausteine steht als style-Attribut im HTML. */

/* --- Schriften vom eigenen Server, keine Verbindung zu Google --- */
@font-face{font-family:'Poppins';src:url('/fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/fonts/source-sans-3-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('/fonts/source-sans-3-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* --- Grundeinstellungen --- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:#fff;color:#2B1F19;font-family:'Source Sans 3',system-ui,sans-serif;font-size:clamp(1.125rem,1.05rem + .3vw,1.3rem);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,picture{max-width:100%}
picture{display:block;width:100%;height:100%}
a{color:#2faa4f;text-underline-offset:.2em;text-decoration-thickness:1.5px}
a:hover{color:#603824}
:focus-visible{outline:3px solid #7DBA36;outline-offset:3px;border-radius:4px}

/* --- Sprungmarke zum Inhalt --- */
.sprung{position:absolute;left:-9999px;top:0;z-index:400;padding:1rem 1.5rem;background:#603824;color:#fff;font-family:'Poppins',system-ui,sans-serif;text-decoration:none}
.sprung:focus{left:1rem;top:1rem;color:#fff}

/* --- Kopfzeile: eine Fassung für große, eine für kleine Bildschirme --- */
.nur-desktop{display:none}
.nur-mobil{display:block}
.nur-breit{display:none}
@media (min-width:1024px){.nur-desktop{display:block}.nur-mobil{display:none}}
@media (min-width:1360px){.nur-breit{display:inline}}

/* --- Ruf-Leiste am unteren Bildschirmrand (nur Smartphone) --- */
.ruf-leiste{display:none}
@media (max-width:1023px){
  .ruf-leiste{position:fixed;left:0;right:0;bottom:0;z-index:200;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#DED6D1;box-shadow:0 -8px 24px -16px rgba(43,31,25,.5)}
  .ruf-leiste a{display:flex;align-items:center;justify-content:center;min-height:60px;padding:.6em 1em;font-family:'Poppins',system-ui,sans-serif;font-weight:500;font-size:1.05rem;text-decoration:none;text-align:center}
  .ruf-leiste a:first-child{background:#fff;color:#603824}
  .ruf-leiste a:last-child{background:#2faa4f;color:#fff}
  #seite{padding-bottom:60px}
}

/* --- Bewegungen --- */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(100%)}100%{transform:translateY(100%)}}
@keyframes sway{0%,100%{rotate:-1.4deg}50%{rotate:1.4deg}}
@keyframes unveil{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes zoomout{from{transform:scale(1.18)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* --- Zustände beim Überfahren und bei Eingabe --- */
.z1:hover{color:#2faa4f !important; background-size:100% 2px !important}
.z2:hover{color:#2faa4f !important}
.z3:hover{background:#603824 !important; border-color:#603824 !important; color:#fff !important}
.z4:hover{gap:1.15rem !important; color:#603824 !important}
.z5:hover{background:#F5F1EF !important}
.z6:hover{background:#603824 !important; color:#fff !important}
.z7:hover{animation-play-state:paused !important}
.z8:hover{box-shadow:0 30px 60px -40px rgba(43,31,25,.4) !important}
.z9:hover{transform:scale(1.05) !important}
.z11:hover{background:#fff !important; border-color:#fff !important; color:#603824 !important}
.z12:hover{background:#7DBA36 !important; border-color:#7DBA36 !important; color:#2B1F19 !important}
.z13:focus{border-color:#2faa4f !important; outline:none !important}

/* --- Formulare (Struktur und Feldnamen wie vorgegeben) --- */
.anfrage-formular{margin:0}
.anfrage-formular .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.anfrage-formular .feld{margin:0 0 1.5rem}
.anfrage-formular label{display:block;font-family:'Poppins',system-ui,sans-serif;font-weight:500;font-size:.95rem;color:#603824;margin-bottom:.4rem}
.anfrage-formular input[type=text],
.anfrage-formular textarea,
.anfrage-formular input[type=file]{width:100%;font:inherit;font-size:1.1rem;line-height:1.4;min-height:52px;padding:.7em 0;border:0;border-bottom:2px solid #DED6D1;border-radius:0;background:transparent;color:#2B1F19;transition:border-color .3s ease}
.anfrage-formular input[type=text]:focus,
.anfrage-formular textarea:focus,
.anfrage-formular input[type=file]:focus{border-color:#2faa4f;outline:none}
.anfrage-formular textarea{min-height:8em;resize:vertical}
.anfrage-formular input[type=file]{padding:.9em 0;cursor:pointer}
.anfrage-formular .einwilligung{display:flex;gap:.8rem;align-items:flex-start;margin-top:.5rem}
.anfrage-formular .einwilligung input{width:22px;height:22px;flex:none;margin:.15em 0 0;accent-color:#2faa4f}
.anfrage-formular .einwilligung label{font-family:inherit;font-weight:400;font-size:1rem;line-height:1.5;color:#6F5F56;margin:0}
.anfrage-formular .hinweis{font-size:1rem;line-height:1.5;color:#6F5F56}
.anfrage-formular .feld .hinweis{display:block;margin-top:.5rem}
.anfrage-formular button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.6em 1.6em;margin-top:.5rem;font-family:'Poppins',system-ui,sans-serif;font-weight:500;font-size:1.05rem;line-height:1.2;border:2px solid #7DBA36;border-radius:6px;background:#7DBA36;color:#2B1F19;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease}
.anfrage-formular button:hover{background:#603824;border-color:#603824;color:#fff}
.anfrage-formular .formular-meldung:empty{display:none}
.anfrage-formular .formular-meldung{margin:1.25rem 0 0;font-family:'Poppins',system-ui,sans-serif;font-weight:500;color:#2faa4f}
.anfrage-formular .formular-meldung[data-fehler]{color:#B3261E}

/* --- Druck --- */
@media print{
  .nur-desktop,.nur-mobil,.ruf-leiste,.sprung{display:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  body{font-size:11pt}
}