.notebook-hero { --notebook-wine:#62182c; --notebook-cream:#f7f3eb; --notebook-paper:#e9ddcb; position:relative; overflow:hidden; isolation:isolate; color:var(--notebook-cream); background:var(--notebook-wine); }
.notebook-hero::before { content:""; position:absolute; z-index:-1; inset:6% auto 4% -8%; width:61%; background:var(--notebook-paper); border-radius:0 48% 52% 0 / 0 42% 58% 0; }
.notebook-inner { display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:5%; max-width:1510px; margin:auto; padding:32px 5vw 46px; }
.notebook-collage { position:relative; min-width:0; min-height:655px; isolation:isolate; --collage-drift:0px; }
.notebook-collage .print { position:absolute; padding:7px 7px 5px; color:#62182c; background:#fffaf0; box-shadow:0 13px 25px #2d111f55; animation:printIn .95s cubic-bezier(.2,.84,.22,1) backwards; }
.notebook-collage .print img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.notebook-collage .print figcaption { padding:7px 3px 3px; font-size:10px; line-height:1.15; }
.notebook-collage .print-location { width:39%; left:51%; top:9%; rotate:12deg; animation-delay:.21s; }
.notebook-collage .print-location img { object-position:center 74%; }
.notebook-collage .print-product { width:38%; left:57%; bottom:10%; rotate:10deg; z-index:3; animation-delay:.4s; }
.notebook-collage .print-product img { aspect-ratio:1.13; object-position:center 44%; }
.notebook-phone { position:absolute; z-index:2; width:min(58%,306px); left:11%; top:4%; padding:8px; border:1.5px solid #645c60; border-radius:43px; background:#1a1519; box-shadow:inset 0 0 0 2px #050506, 3px 8px 0 #37212d, 0 23px 38px #29101f65; rotate:-7deg; translate:0 var(--collage-drift); animation:phoneIn 1.05s cubic-bezier(.16,.82,.22,1) backwards; }
.notebook-phone::before,.notebook-phone::after { content:""; position:absolute; width:4px; border-radius:2px; background:#2c252a; }
.notebook-phone::before { left:-4px; top:22%; height:14%; }
.notebook-phone::after { right:-4px; top:29%; height:12%; }
.phone-screen { position:relative; background:#1d1119; overflow:hidden; aspect-ratio:9/17; border-radius:34px; isolation:isolate; }
.notebook-reel { width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.phone-island { position:absolute; top:7px; left:50%; translate:-50% 0; width:32%; height:4.1%; min-height:13px; border-radius:99px; background:#09080a; box-shadow:0 0 1px #343037; pointer-events:none; }
.phone-island::after { content:""; position:absolute; right:9%; top:24%; height:52%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 36% 36%,#344268,#181926 48%,#101014 70%); }
.phone-home { position:absolute; width:36%; height:3px; left:32%; bottom:4px; background:#fffb; border-radius:5px; pointer-events:none; }
.phone-controls { position:absolute; inset:auto 7px 12px; display:flex; justify-content:space-between; gap:4px; }
.phone-controls button { background:#210f1ce8; color:#fff9f3; border:1px solid #fff6; border-radius:99px; min-height:36px; padding:4px 9px; font-size:10px; font-weight:700; }
.notebook-phone figcaption { position:absolute; left:2%; top:calc(100% + 13px); border-radius:4px; padding:4px 8px; background:var(--notebook-paper); color:#431522; letter-spacing:.1em; font-size:9px; white-space:nowrap; }
.notebook-copy { min-width:0; position:relative; z-index:4; }
.notebook-copy .intro-kicker { font-size:11px; letter-spacing:.14em; font-weight:700; animation:copyIn .58s .12s both; }
.notebook-copy h1 { color:var(--notebook-cream); font:800 clamp(54px,6.35vw,106px)/.94 Fraunces,Georgia,serif; letter-spacing:-.075em; margin:20px 0; animation:copyIn .72s .24s both; }
.notebook-copy h1 span { font:400 1.06em/.92 Allura,Georgia,serif; letter-spacing:-.015em; color:#f5d8b5; }
.notebook-copy .intro-lead { max-width:39ch; font-size:clamp(15px,1.45vw,20px); animation:copyIn .78s .38s both; }
.notebook-copy .intro-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px 17px; margin-top:21px; animation:copyIn .78s .5s both; }
.notebook-copy .notebook-project { background:var(--notebook-cream); color:var(--notebook-wine); border:0; border-radius:99px; }
.notebook-work { text-decoration:underline; text-underline-offset:5px; font-size:13px; }
@keyframes phoneIn { 0% { opacity:0; transform:translateY(42px) rotate(-6deg) scale(.96); } 72% { opacity:1; transform:translateY(-7px) rotate(1deg); } 100% { transform:none; } }
@keyframes printIn { 0% { opacity:0; transform:translate(18px,-36px) rotate(-9deg); } 72% { opacity:1; transform:translate(-3px,5px) rotate(2deg); } 100% { transform:none; } }
@keyframes copyIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.services .offer-card { background:#f7f3eb; }
.services .offer-card h3,.services .offer-link { color:#62182c; }
.services .offer-link span { background:#62182c; }
.reviews { background:#62182c; padding-bottom:53px; }
.reviews > .button { margin-top:16px; background:#f7f3eb; color:#62182c; }
.contact { background:#62182c; }
.site-footer { background:#62182c; }
.contact h2.contact-slogan { font-size:clamp(36px,6.7vw,98px); }
.contact .button.light { background:#f7f3eb; color:#62182c; }
.footer-wordmark { color:#f7e7cf; }
.notebook-hero + .brands { position:relative; }
.notebook-hero + .brands::before { content:""; position:absolute; left:0; right:0; top:-20px; height:22px; background:#f7f3eb; border-radius:55% 42% 0 0 / 100% 100% 0 0; pointer-events:none; }
@media(max-width:1050px) { .notebook-collage { min-height:550px; }.notebook-phone { width:min(57%,255px); } }
@media(max-width:760px) {
 .notebook-inner { grid-template-columns:1fr; padding:23px 18px 29px; gap:22px; }
 .notebook-hero::before { inset:12px auto auto -9%; width:104%; height:420px; border-radius:0 45% 44% 0; }
 .notebook-collage { width:min(100%,445px); margin-inline:auto; min-height:410px; }
 .notebook-phone { top:5%; left:13%; width:min(54%,198px); border-radius:30px; padding:5px; }
 .phone-screen { border-radius:25px; }
 .notebook-collage .print-location { left:52%; width:37%; top:13%; }
 .notebook-collage .print-product { left:55%; width:39%; bottom:13%; }
 .notebook-copy h1 { font-size:clamp(48px,12vw,77px); margin:15px 0; }
 .reviews { padding-bottom:43px; }
 .reviews > .button { margin-top:13px; }
}
@media(max-width:390px) { .notebook-collage { min-height:382px; } .notebook-hero::before { height:392px; } }
.reduced .notebook-phone { translate:none !important; }
@media (prefers-reduced-motion:reduce) { .notebook-phone { translate:none !important; } }
/* The overlapping print must leave both playback targets unobstructed. */
.phone-controls { inset:0; display:block; pointer-events:none; }
.phone-controls button { position:absolute; pointer-events:auto; min-height:40px; }
.phone-controls [data-reel-play] { left:7px; bottom:12px; }
.phone-controls [data-reel-sound] { right:7px; top:40px; }
#angebote { position:relative; }
#angebote::before { content:""; position:absolute; inset:-8px 5vw auto; height:14px; background:repeating-linear-gradient(90deg,#62182c 0 12px,transparent 12px 19px); opacity:.28; clip-path:polygon(0 76%,100% 0,100% 58%,0 100%); pointer-events:none; }
#arbeiten::before { content:""; display:block; width:min(230px,44%); height:6px; margin:0 0 25px; background:#62182c; border-radius:100% 0 100% 0; }
.reviews::before { border-radius:0; clip-path:polygon(0 75%,100% 0,100% 100%,0 100%); }
/* Warm studio palette, scoped around the pet section. */
:root { --studio-wine:#721b39; --studio-blue:#d4e5f8; --studio-apricot:#ffab73; --studio-cream:#fdf8f4; }
header { background:var(--studio-cream); }
header nav { font-size:16px; gap:clamp(14px,2.2vw,34px); }
header nav a { font-weight:600; padding-block:8px; }
header .header-action { background:var(--studio-wine); color:var(--studio-cream); }
header .header-action span { background:var(--studio-cream); color:var(--studio-wine); }
.notebook-hero { --notebook-wine:var(--studio-wine); --notebook-cream:var(--studio-cream); --notebook-paper:var(--studio-blue); }
.notebook-copy h1 span { color:var(--studio-apricot); }
.notebook-phone figcaption { background:var(--studio-apricot); }
.notebook-hero + .brands { background:var(--studio-cream); }
.notebook-hero + .brands::before { background:var(--studio-cream); }
.ticker,.reviews,.contact,.site-footer { background:var(--studio-wine); color:var(--studio-cream); }
.ticker span,.contact h2 em { color:var(--studio-blue); }
.services .offer-card,.reviews .message-thread { background:var(--studio-cream); }
.services .offer-card h3,.services .offer-link,.services h2,.case-copy h2 { color:var(--studio-wine); }
.services .offer-link span { background:var(--studio-wine); }
.planner { background:var(--studio-blue); }
.contact .button.light,.reviews>.button { background:var(--studio-blue); color:var(--studio-wine); }
.footer-wordmark { color:var(--studio-cream); }
.case-example { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(20px,4vw,64px); align-items:center; isolation:isolate; background:var(--studio-blue); padding-block:54px; border-radius:5vw 0 5vw 0; }
.case-media { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(8px,2.3vw,30px); align-items:center; width:min(100%,535px); margin:auto; }
.case-phone { min-width:0; margin:0; padding:6px; background:#1b1619; border:1px solid #75666e; border-radius:clamp(18px,2.8vw,36px); box-shadow:inset 0 0 0 2px #100e10,0 16px 32px #280a2840; rotate:-3deg; }
.case-phone .phone-screen { aspect-ratio:9/16; border-radius:clamp(13px,2.3vw,29px); }
.case-phone video { display:block; width:100%; height:100%; object-fit:contain; }
.case-phone .phone-island { min-height:8px; }
.case-post { min-width:0; margin:0; padding:8px; border-radius:12px; background:#fff; box-shadow:0 12px 28px #280a2828; rotate:3deg; }
.case-post .post-profile { display:flex; align-items:center; gap:6px; font-size:clamp(10px,1.2vw,13px); }
.case-post .post-profile img { width:clamp(22px,2.4vw,34px); height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; }
.case-post-photo { display:block; width:100%; height:auto; border-radius:5px; }
.case-post .post-actions { align-items:center; }
.case-post .case-heart { color:#cf183e; }
.case-post figcaption { font-size:clamp(9px,1.1vw,12px); line-height:1.35; }
.case-copy .eyebrow { margin-bottom:8px; }
.case-copy h2 { font-size:clamp(38px,5.3vw,78px); margin-bottom:15px; }
.case-copy>p:not(.eyebrow) { max-width:47ch; }
.case-steps { margin:17px 0 16px; padding:0; list-style:none; display:grid; gap:8px; }
.case-steps li { display:grid; grid-template-columns:minmax(78px,.34fr) 1fr; gap:10px; padding:8px 12px; border-radius:6px; background:var(--studio-cream); color:#241d20; font-size:13px; line-height:1.4; }
.case-steps strong,.case-request { color:var(--studio-wine); }
.case-request { display:inline-block; font-weight:700; border-bottom:1px solid; }
.case-example.visible .case-media { animation:caseIn .85s cubic-bezier(.21,.89,.32,1.19) backwards; }
.case-example.visible .case-steps li { animation:copyIn .65s backwards; }
.case-example.visible .case-steps li:nth-child(1){animation-delay:.17s}.case-example.visible .case-steps li:nth-child(2){animation-delay:.29s}.case-example.visible .case-steps li:nth-child(3){animation-delay:.41s}
.notebook-copy .notebook-project { animation:projectIn .78s .81s cubic-bezier(.2,.8,.35,1.2) backwards; }
@keyframes caseIn { from{opacity:0;transform:translate(-45px,15px) rotate(-6deg)} to{opacity:1;transform:none} }
@keyframes projectIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }
@media(max-width:760px) {
  header nav { font-size:15px; gap:12px; }
  .case-example { grid-template-columns:1fr; padding:32px 22px; gap:26px; }
}
.notebook-hero + .brands .logo-lane { background:var(--studio-cream); }
#angebote { background:var(--studio-cream); }
#arbeiten { background:#fffbf5; }

#angebote .offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(13px,2.1vw,28px); }
#angebote .offer-card {
  display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr); gap:clamp(12px,2.1vw,28px);
  padding:clamp(12px,1.6vw,22px); background:#fffdfa; border:1px solid #decfd7; border-radius:18px;
}
#angebote .offer-card::before { content:none; }
.offer-image { position:relative; width:100%; aspect-ratio:3/4; margin:0; align-self:center; min-width:0; overflow:hidden; border-radius:9px; }
.offer-card .offer-photo { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.offer-body { display:flex; flex-direction:column; min-width:0; justify-content:center; gap:10px; }
#angebote .offer-link { margin-top:0; align-self:flex-start; min-height:38px; }
#angebote .offer-card h3 { margin:0; font-size:clamp(20px,2.5vw,36px); overflow-wrap:anywhere; }
#angebote .team-support { background:var(--studio-blue); color:#241d20; }
#arbeiten::before { background:var(--studio-apricot); }
#arbeiten .filters button.active, #arbeiten .play, .mobile-contact { background:var(--studio-wine); color:var(--studio-cream); }
.reviews .message-avatar { background:var(--studio-blue); color:var(--studio-wine); }
@media (max-width:780px) { #angebote .offer-grid { grid-template-columns:1fr; } }

/* Keep the collage and copy comfortably apart on wide screens. */
@media (min-width:761px) {
  .notebook-hero::before { width:59.5%; }
  .notebook-inner { gap:6.5%; }
  .notebook-collage { left:-.65vw; }
}
.offer-card#vor-ort .offer-photo { object-position:50% 84%; }
.offer-card#events .offer-photo { object-position:50% 50%; }
.offer-card#ugc .offer-photo { object-position:50% 62%; }
.offer-card#strategie .offer-photo { object-position:50% 75%; filter:brightness(1.09) saturate(1.16) sepia(.14); }
.offer-deliverables { display:grid; gap:5px; list-style:none; margin:0; padding:0; font-size:clamp(11px,1.1vw,14px); line-height:1.4; }
.offer-deliverables li { display:grid; grid-template-columns:7px 1fr; gap:7px; align-items:baseline; }
.offer-deliverables li::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--studio-apricot); border:1px solid #8c412e; }
.ticker span { color:var(--studio-apricot); }
.case-example { background:color-mix(in srgb, var(--studio-blue) 45%, var(--studio-cream)); }

/* Give each service a distinct editorial treatment. */
#angebote .offer-card { box-shadow:0 10px 25px #4311270d; }
#angebote .offer-card#vor-ort { background:var(--studio-wine); border-color:var(--studio-wine); color:#fff8f5; }
#angebote #vor-ort h3, #angebote #vor-ort .offer-link { color:#fff8f5; }
#angebote #vor-ort .offer-link span { background:var(--studio-apricot); color:var(--studio-wine); }
#angebote #events { background:#fbe3d0; border-color:#f3ceb4; border-radius:25px 25px 7px 25px; }
#angebote #ugc { border-radius:7px 25px 25px; }
#angebote #strategie { background:var(--studio-blue); border-color:#c4d7ed; border-radius:25px 7px 25px 25px; }
@media (min-width:781px) {
  #angebote #events .offer-image, #angebote #strategie .offer-image { grid-column:2; grid-row:1; }
  #angebote #events .offer-body, #angebote #strategie .offer-body { grid-column:1; grid-row:1; }
  #angebote #events, #angebote #strategie { grid-template-columns:minmax(0,1fr) minmax(0,.7fr); }
}
.reduced .case-example.visible .case-media,
.reduced .case-example.visible .case-steps li { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .case-example.visible .case-media, .case-example.visible .case-steps li { animation:none; }
}
@media (max-width:760px) {
  .case-media { width:min(calc(100% - 16px),535px); }
}

.contact-socials { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px; margin:16px auto 0; }
.contact-socials a { --social-cutout:var(--studio-wine); display:grid; place-items:center; width:48px; height:48px; border:1px solid currentColor; border-radius:50%; }
.contact-socials a:hover, .contact-socials a:focus-visible { --social-cutout:var(--studio-blue); color:var(--studio-wine); background:var(--studio-blue); border-color:var(--studio-blue); }