/* ZÄHNE – Relaunch. Aus dem Claude-Design-Entwurf generiert. */
html{scroll-behavior:smooth}
#root,x-dc{display:block;min-width:1440px}
image-slot{min-width:0;max-width:100%;display:block;contain:size}
body{margin:0;min-width:1440px;background:#F7F5F2;color:#1C1F1E;font-family:'Hanken Grotesk',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#1C1F1E;text-decoration:none}
a:hover{color:#8A9A8F}
:focus-visible{outline:2px solid #8A9A8F;outline-offset:3px}
::selection{background:#8A9A8F;color:#fff}
button{font-family:'Hanken Grotesk',sans-serif}

/* ---- aus dem Design uebernommene Hover-Zustaende ---- */
.hv1:hover{background:#39423E !important;color:#F7F5F2 !important}
.hv2:hover{background:#FFFFFF !important;color:#1C1F1E !important}
.hv3:hover{color:#F7F5F2 !important}
.hv4:hover{color:#1C1F1E !important}
.hv5:hover{background:#EDE8E1 !important;color:#1C1F1E !important}

/* ---- Utilities ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:999;background:#1C1F1E;color:#F7F5F2;padding:12px 18px;border-radius:6px;font-size:15px;transition:top .2s}
.skip:focus{top:16px;color:#F7F5F2}
img{max-width:100%}

/* ---- Bild-Platzhalter (noch zu liefernde Motive) ---- */
.img-todo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:16px;box-sizing:border-box;background:repeating-linear-gradient(45deg,#EDE8E1,#EDE8E1 10px,#E6E0D8 10px,#E6E0D8 20px);
  border:1px dashed rgba(28,31,30,.25);color:#5C6660;font-size:13px;line-height:1.45}

/* ---- iPhone-Rahmen (Mockups) ---- */
.ios-device{width:290px;height:620px;border-radius:48px;overflow:hidden;position:relative;background:#F2F2F7;
  box-shadow:0 40px 80px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.12);
  font-family:-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;flex:none}
.ios-device::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:104px;height:31px;border-radius:24px;background:#000;z-index:50}
.ios-status{position:absolute;top:0;left:0;right:0;z-index:10;height:54px;display:flex;align-items:center;
  justify-content:space-between;padding:14px 22px 0;box-sizing:border-box;color:#000}
.ios-time{font-weight:600;font-size:14px;letter-spacing:.01em}
.ios-icons{display:flex;align-items:center;gap:5px}
.ios-icons svg{fill:currentColor;display:block}
.ios-screen{height:100%;overflow:hidden}
.ios-home{position:absolute;bottom:0;left:0;right:0;z-index:60;height:34px;display:flex;justify-content:center;
  align-items:flex-end;padding-bottom:8px;pointer-events:none}
.ios-home i{width:110px;height:5px;border-radius:100px;background:rgba(0,0,0,.25)}

/* ---- Chat-Widget ---- */
.chat{position:fixed;right:28px;bottom:28px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.chat-panel{width:370px;height:min(500px,calc(100vh - 130px));background:#F7F5F2;border:1px solid rgba(28,31,30,.12);
  border-radius:10px;box-shadow:0 24px 64px rgba(28,31,30,.25);display:flex;flex-direction:column;overflow:hidden}
.chat-panel[hidden]{display:none}
.chat-head{background:#1C1F1E;color:#F7F5F2;padding:16px 20px;display:flex;flex-direction:column;gap:2px}
.chat-brand{font-size:15px;font-weight:600;letter-spacing:.22em}
.chat-sub{font-size:12.5px;color:rgba(247,245,242,.65)}
.chat-scroll{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px}
.msg{padding:10px 14px;font-size:14px;line-height:1.5;max-width:85%;white-space:pre-wrap}
.msg.bot{align-self:flex-start;background:#EDE8E1;color:#1C1F1E;border-radius:8px 8px 8px 2px}
.msg.me{align-self:flex-end;background:#1C1F1E;color:#F7F5F2;border-radius:8px 8px 2px 8px}
.msg.typing{align-self:flex-start;color:#5C6660;font-size:13px;padding:2px 4px;background:none}
.chat-form{border-top:1px solid rgba(28,31,30,.1);padding:12px;display:flex;gap:8px;background:#FDFCFA}
.chat-form input{flex:1;min-width:0;height:44px;border:1px solid rgba(28,31,30,.18);border-radius:6px;padding:0 14px;
  font-size:14px;font-family:'Hanken Grotesk',sans-serif;background:#fff;color:#1C1F1E}
.chat-form button{height:44px;min-width:44px;padding:0 18px;background:#1C1F1E;color:#F7F5F2;border:none;border-radius:6px;
  font-size:14px;font-weight:600;cursor:pointer}
.chat-form button:hover{background:#39423E}
.chat-fab{width:56px;height:56px;border-radius:50%;background:#1C1F1E;color:#F7F5F2;border:none;cursor:pointer;
  box-shadow:0 12px 32px rgba(28,31,30,.3);display:flex;align-items:center;justify-content:center;font-size:20px}
.chat-fab:hover{background:#39423E}

/* ---- Motion-Praeferenz respektieren ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---- Print ---- */
@media print{.chat,#hero-vid{display:none}}