@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;
src:url(//firma-kannengiesser.de/wp-content/themes/kannengiesser/assets/fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:600;font-display:swap;
src:url(//firma-kannengiesser.de/wp-content/themes/kannengiesser/assets/fonts/eb-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
src:url(//firma-kannengiesser.de/wp-content/themes/kannengiesser/assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
src:url(//firma-kannengiesser.de/wp-content/themes/kannengiesser/assets/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
src:url(//firma-kannengiesser.de/wp-content/themes/kannengiesser/assets/fonts/inter-latin-600-normal.woff2) format("woff2")} :root{ --ink:        #111111; --ink-soft:   #3b3a38; --ink-mute:   #6d6b66; --line:       #e3e1dc; --paper:      #ffffff;
--paper-warm: #f7f6f3; --gold:       #b3944f; --gold-deep:  #7d6524; --gold-tint:  #f2ecdd;  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wrap: 1080px;
--pad:  clamp(1.25rem, 5vw, 2.5rem);
--sect: clamp(3.5rem, 9vw, 6.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{
margin:0;
background:var(--paper);
color:var(--ink-soft);
font-family:var(--sans);
font-size:1.0313rem;
line-height:1.68;
letter-spacing:-.002em;
font-feature-settings:"kern" 1;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.15; margin:0}
h1{font-size:clamp(2.35rem,6.6vw,4.1rem); letter-spacing:-.005em}
h2{font-size:clamp(1.8rem,4vw,2.7rem); letter-spacing:-.003em}
h3{font-size:1.22rem; letter-spacing:0}
p{margin:0 0 1.1em}
a{color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--gold-deep)}
img,svg{max-width:100%; height:auto}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--sect)}
.section--warm{background:var(--paper-warm); border-block:1px solid var(--line)}
.section--ink{background:var(--ink); color:rgba(255,255,255,.78)}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .eyebrow{color:var(--gold)}
.section--ink .eyebrow::after{background:rgba(255,255,255,.22)}
.section--ink .ticks li::before{border-color:var(--gold); background:transparent}
.section--ink a:not(.btn){color:#fff} .skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.75rem 1.25rem; z-index:200}
.skip:focus{left:.5rem; top:.5rem}
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px} .eyebrow{
font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--gold-deep); font-weight:600; margin:0 0 .9rem;
display:flex; align-items:center; gap:.75rem;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line); max-width:5rem} .mark{display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink)}
.mark__icon{height:2.5em; width:auto; flex:none; color:inherit; display:block}
.mark__text{display:block; font-family:var(--serif); font-size:1.16rem; font-weight:600; line-height:1.15; letter-spacing:.02em}
.mark__text small{
display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; white-space:nowrap;
text-transform:uppercase; color:var(--ink-mute); margin-top:.2rem; font-weight:600;
} .head{
position:sticky; top:0; z-index:100;
background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px);
border-bottom:1px solid var(--line);
}
.head__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:68px}
.nav{display:none; gap:1.9rem}
.nav a{font-size:.9rem; text-decoration:none; color:var(--ink-soft); letter-spacing:.01em; white-space:nowrap}
.nav a:hover{color:var(--ink)}
@media(min-width:1060px){ .nav{display:flex} } .btn{
white-space:nowrap;
display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
padding:.8rem 1.4rem; font-size:.92rem; font-weight:600; letter-spacing:.02em;
text-decoration:none; border:1px solid var(--ink); background:var(--ink); color:#fff;
transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{background:var(--gold-deep); border-color:var(--gold-deep); color:#fff}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn--light{background:#fff; border-color:#fff; color:var(--ink)}
.btn--light:hover{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.btn--outline-light{background:transparent; border-color:rgba(255,255,255,.45); color:#fff}
.btn--outline-light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn--sm{padding:.6rem 1.05rem; font-size:.85rem}
.head .btn{display:none}
@media(min-width:560px){ .head .btn{display:inline-flex} } .hero{background:var(--ink); color:#fff; padding-block:clamp(3.5rem,10vw,7rem); position:relative; overflow:hidden}
.hero > .wrap{position:relative; z-index:1}
.hero__watermark{
position:absolute; right:5%; top:50%; transform:translateY(-50%);
height:min(72%,430px); width:auto; color:#fff; opacity:.055;
pointer-events:none; display:none;
}
@media(min-width:1040px){ .hero__watermark{display:block} }
.hero h1{color:#fff}
.hero__lead{font-size:clamp(1.05rem,2.2vw,1.25rem); color:rgba(255,255,255,.78); max-width:44ch; margin-top:1.4rem}
.hero__rule{width:56px; height:2px; background:var(--gold); margin-bottom:1.8rem}
.hero__kicker{
font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--gold); font-weight:600; margin:0 0 1.1rem;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem}
.hero__facts{
display:grid; gap:1.5rem; margin-top:3.4rem;
border-top:1px solid rgba(255,255,255,.16); padding-top:2rem;
grid-template-columns:1fr;
}
@media(min-width:640px){ .hero__facts{grid-template-columns:repeat(3,1fr); gap:2rem} }
.fact strong{display:block; font-family:var(--serif); font-size:1.65rem; font-weight:600; color:#fff; line-height:1.2}
.fact span{font-size:.88rem; color:rgba(255,255,255,.6)}  .grid-services{display:grid; margin-top:2.6rem;
border-top:1px solid var(--line); border-left:1px solid var(--line)}
.grid-services > .service{border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
@media(min-width:620px){ .grid-services{grid-template-columns:repeat(2,1fr)} }
@media(min-width:940px){ .grid-services{grid-template-columns:repeat(3,1fr)} }
.service{background:var(--paper); padding:1.9rem 1.6rem; transition:background .18s ease}
.service:hover{background:var(--gold-tint)}
.service__no{
font-family:var(--serif); font-size:.8rem; color:var(--gold-deep);
letter-spacing:.08em; display:block; margin-bottom:.9rem;
}
.service h3{margin-bottom:.5rem}
.service p{font-size:.92rem; color:var(--ink-mute); margin:0} .steps{display:grid; gap:2.2rem; margin-top:2.8rem}
@media(min-width:780px){ .steps{grid-template-columns:repeat(3,1fr); gap:2.8rem} }
.step{border-top:2px solid var(--ink); padding-top:1.3rem}
.step__no{
font-family:var(--serif); font-size:2.9rem; line-height:1; color:var(--gold-deep);
display:block; margin-bottom:.6rem;
}
.step h3{margin-bottom:.45rem}
.step p{font-size:.95rem; color:var(--ink-mute); margin:0} .split{display:grid; gap:2.6rem}
@media(min-width:860px){ .split{grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start} }
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.ticks li{position:relative; padding-left:1.75rem; font-size:.98rem}
.ticks li::before{
content:""; position:absolute; left:0; top:.62em;
width:.55rem; height:.55rem; border:1px solid var(--gold-deep); background:var(--gold-tint);
} .contact{display:grid; gap:2.6rem; margin-top:2.6rem}
@media(min-width:860px){ .contact{grid-template-columns:1fr 1fr; gap:4.5rem} }
.dl{margin:0; display:grid; gap:1.5rem}
.dl dt{
font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-mute); font-weight:600; margin-bottom:.25rem;
}
.dl dd{margin:0; font-size:1.12rem; color:var(--ink)}
.dl dd a{text-decoration:none; border-bottom:1px solid var(--line)}
.dl dd a:hover{border-color:var(--gold-deep)}
.card{background:var(--paper-warm); border:1px solid var(--line); padding:2rem 1.8rem}
.card h3{margin-bottom:.7rem}
.card p{font-size:.95rem; color:var(--ink-mute)} .legal{padding-block:var(--sect); border-top:1px solid var(--line)}
.legal h2{margin-bottom:1.6rem}
.legal h3{margin:2rem 0 .5rem; font-size:1rem}
.legal p, .legal li{font-size:.92rem; color:var(--ink-mute); line-height:1.75}
.legal .cols{display:grid; gap:3.5rem}
@media(min-width:920px){ .legal .cols{grid-template-columns:1fr 1fr; gap:4.5rem} }
.note{
background:var(--gold-tint); border-left:3px solid var(--gold-deep);
padding:1rem 1.2rem; font-size:.88rem; color:var(--ink-soft); margin:1.2rem 0;
} .foot{background:var(--ink); color:rgba(255,255,255,.62); padding-block:3rem; font-size:.88rem}
.foot a{color:rgba(255,255,255,.82); text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot__in{display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center}
.foot .mark{color:#fff}
.foot .mark__icon{color:var(--gold)}
.foot .mark__text small{color:rgba(255,255,255,.5)}
.foot nav{display:flex; flex-wrap:wrap; gap:1.4rem} .callbar{
position:fixed; left:0; right:0; bottom:0; z-index:120;
display:flex; background:var(--ink); border-top:1px solid rgba(255,255,255,.15);
}
.callbar a{
flex:1; text-align:center; padding:.95rem .5rem; color:#fff; text-decoration:none;
font-size:.92rem; font-weight:600; letter-spacing:.02em;
}
.callbar a+a{border-left:1px solid rgba(255,255,255,.15); color:var(--gold)}
@media(min-width:560px){ .callbar{display:none} }
@media(max-width:559px){ body{padding-bottom:3.4rem} }
@media print{
.head,.callbar,.hero__cta{display:none}
body{color:#000; font-size:11pt}
.hero{background:#fff; color:#000}
.hero h1,.hero__lead{color:#000}
} .pagehead{background:var(--ink); color:rgba(255,255,255,.72); padding-block:clamp(2.6rem,7vw,4.2rem)}
.pagehead h1{color:#fff; font-size:clamp(2.1rem,5vw,3.2rem)}
.pagehead .eyebrow{color:var(--gold)}
.pagehead .eyebrow::after{background:rgba(255,255,255,.22)}
.pagehead p{margin:1rem 0 0; font-size:.95rem; max-width:52ch}
.back{display:inline-flex; align-items:center; gap:.45rem; margin-top:1.6rem;
font-size:.9rem; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.back:hover{color:var(--gold); border-color:var(--gold)} .legal--page{border-top:0}
.legal--page .cols{grid-template-columns:1fr}
@media(min-width:920px){ .legal--page .cols{grid-template-columns:1fr} }
.legal--page .cols > div{max-width:72ch} .foot__credit{margin:0; width:100%; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12);
display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between}
.foot__credit a{border-bottom:1px solid rgba(255,255,255,.28)}
.foot__credit a:hover{border-color:var(--gold)} @media(max-width:720px){
.nav a, .foot nav a{display:inline-block; padding-block:.6rem}
.foot nav{gap:.2rem 1.4rem}
.back{padding-block:.55rem}
.dl dd a, .legal a, .foot__credit a{display:inline-block; padding-block:.4rem}
.foot__credit{gap:.2rem 1.5rem}
} .burger{
display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
width:44px; height:44px; padding:0 10px; margin-right:-10px;
background:none; border:0; cursor:pointer; color:var(--ink);
}
.burger span{
display:block; height:2px; width:100%; background:currentColor;
transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1060px){ .burger{display:none} }
.menu{
position:fixed; inset:0; z-index:90;
background:var(--paper); padding:calc(68px + 1.5rem) var(--pad) calc(3.8rem + env(safe-area-inset-bottom, 0px));
display:flex; flex-direction:column;
opacity:0; visibility:hidden; transform:translateY(-10px);
transition:opacity .26s ease, transform .26s cubic-bezier(.4,0,.2,1), visibility .26s;
overflow-y:auto;
}
.menu[data-open="true"]{opacity:1; visibility:visible; transform:none}
@media(min-width:1060px){ .menu{display:none} }
.menu nav{display:flex; flex-direction:column}
.menu nav a{
font-family:var(--serif); font-size:1.65rem; font-weight:600; color:var(--ink); text-decoration:none;
padding:.85rem 0; border-bottom:1px solid var(--line);
opacity:0; transform:translateY(8px);
}
.menu[data-open="true"] nav a{animation:menuIn .34s cubic-bezier(.2,.7,.3,1) forwards}
.menu[data-open="true"] nav a:nth-child(1){animation-delay:.05s}
.menu[data-open="true"] nav a:nth-child(2){animation-delay:.09s}
.menu[data-open="true"] nav a:nth-child(3){animation-delay:.13s}
.menu[data-open="true"] nav a:nth-child(4){animation-delay:.17s}
.menu[data-open="true"] nav a:nth-child(5){animation-delay:.21s}
.menu[data-open="true"] nav a:nth-child(6){animation-delay:.25s}
.menu[data-open="true"] nav a:nth-child(7){animation-delay:.29s}
@keyframes menuIn{to{opacity:1; transform:none}}
.menu__foot{margin-top:auto; padding-top:2rem; display:grid; gap:.7rem}
.menu__foot .btn{width:100%}
.menu__foot p{margin:0; font-size:.85rem; color:var(--ink-mute)}
body[data-menu="offen"]{overflow:hidden} .head{transition:box-shadow .25s ease, background-color .25s ease}
.head[data-scrolled="true"]{box-shadow:0 1px 20px rgba(0,0,0,.07)}
.nav a{position:relative; padding-block:.2rem}
.nav a::after{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
background:var(--gold-deep); transform:scaleX(0); transform-origin:left;
transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover::after{transform:scaleX(1)}
.btn{position:relative; overflow:hidden}
.btn:active{transform:translateY(1px)}
.service{position:relative}
.service::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
background:var(--gold-deep); transform:scaleY(0); transform-origin:top;
transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.service:hover::before{transform:scaleY(1)}
.service h3{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.service:hover h3{transform:translateX(4px)}
.step{position:relative}
.step__no{transition:color .3s ease}
.step:hover .step__no{color:var(--ink)}
.card{transition:border-color .3s ease, box-shadow .3s ease}
.card:hover{border-color:var(--gold-deep); box-shadow:0 6px 30px rgba(0,0,0,.05)}
.mark__icon{transition:transform .35s cubic-bezier(.34,1.4,.5,1)}
.mark:hover .mark__icon{transform:translateY(-2px) rotate(-2deg)} .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1; transform:none}
.reveal-d1{transition-delay:.06s} .reveal-d2{transition-delay:.12s} .reveal-d3{transition-delay:.18s}
.reveal-d4{transition-delay:.24s} .reveal-d5{transition-delay:.30s} .reveal-d6{transition-delay:.36s} .hero__kicker,.hero__rule,.hero h1,.hero__lead,.hero__cta,.hero__facts{
opacity:0; transform:translateY(14px);
animation:heroIn .8s cubic-bezier(.2,.7,.3,1) forwards;
}
.hero__kicker{animation-delay:.05s}
.hero__rule{animation-delay:.12s}
.hero h1{animation-delay:.18s}
.hero__lead{animation-delay:.30s}
.hero__cta{animation-delay:.40s}
.hero__facts{animation-delay:.50s}
@keyframes heroIn{to{opacity:1; transform:none}}
.hero__watermark{opacity:0; animation:waterIn 1.4s ease .5s forwards}
@keyframes waterIn{to{opacity:.055}}
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1; transform:none; transition:none}
.hero__kicker,.hero__rule,.hero h1,.hero__lead,.hero__cta,.hero__facts,
.hero__watermark,.menu[data-open="true"] nav a{animation:none; opacity:1; transform:none}
.hero__watermark{opacity:.055}
.menu{transition:opacity .01s}
} .legal--page .cols > div > h2{font-size:1.35rem; margin:2.6rem 0 .7rem}
.legal--page .cols > div > h2:first-child{margin-top:0}
.legal--page .cols > div > h3{font-size:1.02rem; margin:2rem 0 .5rem}
.legal--page .cols > div > h4{font-family:var(--sans); font-size:.92rem; font-weight:600;
color:var(--ink); margin:1.4rem 0 .4rem}
.legal ul, .legal ol{padding-left:1.3rem; margin:0 0 1.1em}
.legal li{margin-bottom:.35rem}
.legal a{color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px}
.legal a:hover{color:var(--gold-deep)}
.legal strong{color:var(--ink)}
.legal table{width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.9rem}
.legal th, .legal td{text-align:left; padding:.6rem .8rem .6rem 0;
border-bottom:1px solid var(--line); vertical-align:top}
.legal th{color:var(--ink); font-weight:600}
.legal hr{border:0; border-top:1px solid var(--line); margin:2rem 0}
.legal blockquote{margin:1.2rem 0; padding-left:1.2rem; border-left:2px solid var(--gold-deep)} .legal img, .legal figure{max-width:100%; height:auto}
.legal figure{margin:1.4rem 0}
.legal figcaption{font-size:.85rem; color:var(--ink-mute); margin-top:.5rem} body.admin-bar .head{top:32px}
@media screen and (max-width:782px){ body.admin-bar .head{top:46px} }