/* Bären Schneiderei, Basis */

/* Schriften (lokal gehostet, Latin) */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-500.woff2) format("woff2")}

:root{--bg:#F7F5F0;--surface:#EFEBE3;--text:#1A1A1A;--text2:#5E5A54;--line:#DAD4C8;--accent:#B8935A;--accent-text:#86642B;--linen-blend:multiply;--linen-op:.07;--serif:"Newsreader",Georgia,serif;--glow-op:.12;--sans:"Hanken Grotesk",system-ui,sans-serif;--pad:max(clamp(24px,6vw,96px),env(safe-area-inset-left),env(safe-area-inset-right));color-scheme:light}
[data-theme="dark"]{--bg:#0F0F0F;--surface:#181715;--text:#EDEAE3;--text2:#A39E95;--line:#2B2925;--accent:#C9A96E;--accent-text:#C9A96E;--glow-op:.10;--linen-blend:screen;--linen-op:.05;color-scheme:dark}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .5s ease,color .5s ease}
a{color:inherit;text-decoration:none;transition:color .3s ease,border-color .3s ease}
a:hover{color:var(--accent)}
em{font-style:italic}
::selection{background:var(--accent);color:#0F0F0F}
:focus-visible{outline:1px solid var(--accent);outline-offset:6px}
input,textarea,button{font:inherit;color:inherit}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}

/* Hover und Fokus */
.f1:focus{position:fixed !important;top:12px !important;left:12px !important;width:auto !important;height:auto !important;clip:auto !important;padding:12px 18px !important;background:var(--bg) !important;border:1px solid var(--accent) !important;z-index:100 !important}
.h2:hover{color:var(--accent) !important}
.h3:hover{border-bottom-color:var(--accent) !important}

/* Leistungen: Hover und Tastaturfokus. Nummer gold, Titel kursiv, obere und untere Haarlinie werden zu goldenen Nähten */
.svc{outline:none}
.svc-num{color:var(--accent-text);transition:color .6s ease}
.svc::before,.svc::after{content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;background-image:repeating-linear-gradient(90deg,var(--accent) 0 6px,var(--bg) 6px 10px);clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.6,0,.2,1)}
.svc:focus-visible{z-index:1}
@media (hover:hover){.svc:hover{z-index:1}}
.svc::before{top:-1px}
.svc::after{bottom:-1px}
@keyframes svc-in{0%{opacity:1;font-style:normal}49%{opacity:.6;font-style:normal}50%{opacity:.6;font-style:italic}100%{opacity:1;font-style:italic}}
@keyframes svc-out{0%{opacity:1;font-style:italic}49%{opacity:.6;font-style:italic}50%{opacity:.6;font-style:normal}100%{opacity:1;font-style:normal}}
.svc-out h3{animation:svc-out .25s ease}
.svc:focus-visible .svc-num{color:var(--accent-text)}
.svc:focus-visible::before,.svc:focus-visible::after{clip-path:inset(0 0 0 0)}
.svc:focus-visible h3{font-style:italic;animation:svc-in .25s ease}
@media (hover:hover){
  .svc-num{color:var(--text2)}
  .svc:hover .svc-num,.svc:focus-visible .svc-num{color:var(--accent-text)}
  .svc:hover::before,.svc:hover::after{clip-path:inset(0 0 0 0)}
  .svc:hover h3{font-style:italic;animation:svc-in .25s ease}
}
@media (prefers-reduced-motion:reduce){.svc h3{animation:none!important}}

/* Ablauf: Naht über den Schritten, Hover und Fokus */
.step{outline:none}
.step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;opacity:.7;background-image:repeating-linear-gradient(90deg,var(--accent) 0 6px,var(--bg) 6px 10px);transition:clip-path .7s cubic-bezier(.6,0,.2,1),opacity .4s ease}
.step-num{color:var(--accent-text);transition:color .5s ease}
.step h3{color:var(--text);transition:color .5s ease}
.steps.pre .step::before{clip-path:inset(0 100% 0 0)}
.steps.pre .step.sewn::before{clip-path:inset(0 0 0 0)}
.steps.pre .step:not(.lit) .step-num,.steps.pre .step:not(.lit) h3{color:var(--text2)}
.step:focus-visible::before{opacity:1}
.step:focus-visible h3{font-style:italic;animation:svc-in .25s ease}
@media (hover:hover){.step:hover::before{opacity:1}.step:hover h3{font-style:italic;animation:svc-in .25s ease}}
@media (prefers-reduced-motion:reduce){.step h3{animation:none!important}}

/* Responsive */
.foot-bottom{grid-template-columns:minmax(0,1fr)}
@media (max-width:899.98px){.nav-wide{display:none!important}}
@media (min-width:900px){.nav-burger{display:none!important}.foot-bottom{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.foot-l{justify-self:start}.foot-r{justify-self:end}}

/* Besuch und Kontakt */
.visit{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:960px){
  .visit{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;align-items:stretch}
  .v-form{grid-column:1;grid-row:1 / span 2}
  .v-hours{grid-column:2;grid-row:1}
  .v-addr{grid-column:2;grid-row:2}
}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(24px,3vw,40px)}
.card-title{margin:0;font-family:var(--serif);font-weight:400;font-style:normal;font-size:clamp(26px,2.4vw,34px);line-height:1.2;letter-spacing:-.01em}
.lead{margin:12px 0 0;color:var(--text2);font-size:16px;line-height:1.6}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.pill{display:inline-flex;align-items:center;gap:10px;margin:0;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:13px;line-height:1.4;color:var(--text)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--text2);flex:none}
.pill.is-open .dot{background:var(--accent)}
.hours{list-style:none;margin:24px 0 0;padding:0;font-size:16px;font-variant-numeric:tabular-nums}
.hrow{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-top:1px solid var(--line);transition:color .4s ease}
.hrow:last-child{border-bottom:1px solid var(--line)}
.hrow-t{display:flex;flex-direction:column;text-align:right;white-space:nowrap}
@media (max-width:479.98px){.hrow{flex-direction:column;align-items:flex-start;gap:2px}.hrow-t{text-align:left}}
.v-hours{container-type:inline-size}
.btn-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:28px}
.btn-row .btn{padding:0 10px;gap:8px;white-space:nowrap}
@container (max-width:370px){.btn-row{grid-template-columns:1fr;gap:12px}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid var(--text);font:inherit;font-size:16px;font-weight:500;line-height:1;cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.btn-fill{background:var(--text);color:var(--bg)}
.btn-fill:hover{background:var(--accent);border-color:var(--accent);color:#1A1A1A}
.btn-line{background:transparent;color:var(--text);border-color:var(--text2)}
.btn-line:hover{border-color:var(--accent);color:var(--accent-text)}
.btn[disabled]{opacity:.6;cursor:default}
.btn-send{padding:0 32px}
.addr{font-style:normal}
.route{display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:20px;font-size:15px;letter-spacing:.04em;border-bottom:1px solid var(--text2)}
.fld-row{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld span{font-size:13px;line-height:1.3;color:var(--text2)}
.fld input,.fld textarea{width:100%;box-sizing:border-box;min-height:52px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:16px;line-height:1.5;color:var(--text);outline:none;transition:border-color .3s ease}
.fld textarea{resize:vertical;min-height:140px}
.count{align-self:flex-end;font-size:13px;line-height:1.3;color:var(--text2);font-variant-numeric:tabular-nums;transition:color .3s ease}
.count.is-near{color:var(--accent-text)}
@media (min-width:960px){
  .v-form{display:flex;flex-direction:column}
  .v-form form{flex:1}
  .v-form .fld-grow{flex:1}
  .v-form .fld-grow textarea{flex:1}
}
.fld input:focus,.fld textarea:focus{border-color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media (max-width:359.98px){.brand-name{font-size:17px!important}header a[aria-label]{gap:10px!important}}
.scope{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(72px,8vw,100px) 8vw}
@media (min-width:700px){.scope{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.legal p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Tablet: bewusste Raster */
.steps{display:grid!important;grid-template-columns:minmax(0,1fr);gap:64px clamp(32px,5vw,80px)!important}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px) and (max-width:1279.98px){.visit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.v-form{container-type:inline-size}
@container (min-width:420px){.fld-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (pointer:coarse){.foot-links a{display:flex;align-items:center;min-height:48px}}